@import "../../base";

@import "../error-message/index";
@import "../hint/index";
@import "../label/index";

@include govuk-exports("govuk/component/input") {
  .govuk-input {
    @include govuk-font($size: 19);

    box-sizing: border-box;
    width: 100%;
    height: govuk-px-to-rem(40px);
    margin-top: 0;
    padding: govuk-spacing(1);
    // Setting any background-color makes text invisible when changing colours
    // to dark backgrounds in Firefox (https://bugzil.la/1335476). As
    // background-color and color need to always be set together, color should
    // not be set either
    border: $govuk-border-width-form-element solid;
    border-radius: 0;
    border-color: govuk-functional-colour(input-border);

    // Disable inner shadow and remove rounded corners
    -webkit-appearance: none;
            appearance: none;

    &:focus {
      @include govuk-focused-form-input;
    }

    &:disabled {
      opacity: 0.5;
      color: inherit;
      background-color: transparent;
      cursor: not-allowed;
    }
  }

  .govuk-input::-webkit-outer-spin-button,
  .govuk-input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
  }

  .govuk-input[type="number"] {
    -moz-appearance: textfield;
  }

  .govuk-input--error {
    border-color: govuk-functional-colour(error);

    &:focus {
      border-color: govuk-functional-colour(input-border);
    }
  }

  .govuk-input--extra-letter-spacing {
    @include govuk-font-tabular-numbers;
    letter-spacing: 0.05em;
  }

  // em measurements are based on the point size of the typeface
  // Extra space is added on the right to allow for the Safari prefill icon

  .govuk-input--width-30 {
    max-width: 29.5em;
  }

  .govuk-input--width-20 {
    max-width: 20.5em;
  }

  .govuk-input--width-10 {
    max-width: 11.5em;
  }

  .govuk-input--width-5 {
    max-width: 5.5em;
  }

  .govuk-input--width-4 {
    max-width: 4.5em;
  }

  .govuk-input--width-3 {
    max-width: 3.75em;
  }

  .govuk-input--width-2 {
    max-width: 2.75em;
  }

  .govuk-input__wrapper {
    display: flex;

    .govuk-input {
      flex: 0 1 auto;
    }

    .govuk-input:focus {
      // Hack to stop focus style being overlapped by the suffix
      z-index: 1;
    }

    // Split prefix/suffix onto separate lines on narrow screens
    @media #{govuk-until-breakpoint(mobile)} {
      display: block;

      .govuk-input {
        // Set max-width to override potential width override class on the input
        max-width: 100%;
      }
    }
  }

  .govuk-input__prefix,
  .govuk-input__suffix {
    @include govuk-font($size: 19);
    box-sizing: border-box;
    // Use flexbox to align text within the prefix and suffix
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: govuk-px-to-rem(40px);
    height: govuk-px-to-rem(40px);
    padding: govuk-spacing(1);
    border: $govuk-border-width-form-element solid;
    border-color: govuk-functional-colour(input-border);
    background-color: govuk-colour("black", $variant: "tint-95");
    text-align: center;
    white-space: nowrap;
    // Emphasise non-editable status of prefixes and suffixes
    cursor: default;
    flex: 0 0 auto;
    // Split prefix/suffix onto separate lines on narrow screens
    @media #{govuk-until-breakpoint(mobile)} {
      display: block;
      height: 100%;
      white-space: normal;
    }
  }

  .govuk-input__prefix {
    @media #{govuk-until-breakpoint(mobile)} {
      border-bottom: 0;
    }
    @media #{govuk-from-breakpoint(mobile)} {
      border-right: 0;
    }
  }

  // Split prefix/suffix onto separate lines on narrow screens
  .govuk-input__suffix {
    @media #{govuk-until-breakpoint(mobile)} {
      border-top: 0;
    }
    @media #{govuk-from-breakpoint(mobile)} {
      border-left: 0;
    }
  }
}

/*# sourceMappingURL=_index.scss.map */