@use "design";

.inputsTable {
  border-spacing: 10px;
  border-collapse: separate;
}

.colorSuccess {
  color: design.$color-success;
}

.colorError {
  color: design.$color-error;
}

.buttonsTable {
  &:not(.autoWidth) {
    width: 100%;
  }

  border-collapse: collapse;

  th,
  td {
    border: 1px solid design.$color-outline;
    padding: 10px;
  }

  th {
    color: design.$text-grey;
    text-align: center;
  }
}

.buttonsTableLabels {
  width: 100px;
}

.shadeScale {
  display: flex;
  width: 100%;
  > div {
    flex-grow: 1;
    text-align: center;
    padding: 20px 0;
    &.invert {
      color: #fff;
    }
  }
}

.shadeLabel {
  width: 75px;
}