@import "../../styles/variables.scss";

.numberInput {
  display: flex;
}

.input {
  flex-grow: 1;
  padding: 0 $base-spacing;
  vertical-align: top;
  text-align: center;
  outline: none;
  background: $base-input-background;
  border: $base-border;
  border-width: $base-border-width 0;
  font-size: $body-font-size;
}

.input,
.decrement,
.increment {
  height: $base-input-height;
  user-select: none;
}

.decrement,
.increment {
  flex: 0 0  $base-input-height;
  border: $base-border;
  display: block;
  width: $base-input-height;
  line-height: $base-input-height;
  background: $brand-white;
  color: $brand-blue;
  text-align: center;
  font-weight: bold;
  cursor: pointer;

  &:active {
    background-color: lighten($brand-blue, 33%);
  }

  &:hover {
    background-color: lighten($brand-blue, 33%);
    border-color: $brand-blue;
  }
}

.decrement {
  border-radius: $base-border-radius 0 0 $base-border-radius;
}

.increment {
  border-radius: 0 $base-border-radius $base-border-radius 0;
}

.disabled {
  .decrement,
  .increment {
    color: $brand-lightGrey;

    &:active {
      background-color: $brand-white;
    }

    &:hover {
      background-color: $brand-white;
      border: $base-border;
      cursor: default;
    }
  }
  .input {
    background: $brand-nearWhite;
    color: $brand-lightGrey;
  }
}