// ============================================================================
// :: Amount
// ============================================================================
/**
 * Component used to insert a certain amount, this component makes heavy use
 * of JavaScript to make sure the input field get scaled when typing.
 */

// ============================================================================
// :: Root
// ============================================================================
.a-amount-input {
  position: relative;

  display: inline-flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
}

// ============================================================================
// :: Elements
// ============================================================================
.a-amount-input__simulator {
  position: absolute;
  top: 0;
  left: 0;

  opacity: 0;
  pointer-events: none;
}

.a-amount-input__container {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.a-amount-input__unit,
.a-amount-input__field,
.a-amount-input__simulator {
  font-family: $font-family-sora;
  font-weight: $font-weight-bold;
  font-size: $font-size-4x-large;
  line-height: $line-height-normalize;

  color: $text-color-white;

  @include respond-at($breakpoint-tablet-default) {
    font-size: $font-size-6x-large;
  }
}

.a-amount-input__unit {
  display: inline-block;

  margin-right: 1rem;
}

.a-amount-input__field {
  // font-weight: $font-weight-bold;

  border: none;
  background-color: transparent;

  @include placeholder() {
    font-family: $font-family-sora;
    font-size: $font-size-4x-large;
    font-weight: $font-weight-bold;

    color: $text-color-white;
    opacity: 0.4;

    @include respond-at($breakpoint-tablet-default) {
      font-size: $font-size-6x-large;
    }
  }

  &::-webkit-outer-spin-button,
  &::-webkit-inner-spin-button {
    display: none;
    margin: 0;

    -webkit-appearance: none;
  }

  &:focus {
    outline: 0.2rem solid $primary-color-base;
    outline-offset: 0.2rem;
  }
}

.a-amount-input__simulator,
.a-amount-input__field {
  min-width: 8.5rem; // 8.5rem with Sora font

  @include respond-at($breakpoint-tablet-default) {
    min-width: 14rem; // 14rem with Sora font
  }
}

.a-amount-input__field {
  width: 8.5rem; // 8.5rem with Sora font

  @include respond-at($breakpoint-tablet-default) {
    width: 14rem; // 14rem with Sora font
  }
}

// ============================================================================
// :: Modifiers
// ============================================================================
.a-amount-input--primary {
  .a-amount-input__field {
    color: $primary-color-base;

    @include placeholder() {
      color: $primary-color-base;
    }
  }

  .a-amount-input__unit {
    color: $primary-color-base;
  }
}