@use "../../core/settings" as *;
@use "../../core/tools" as *;
@use "../../core/helpers" as *;
@forward "../button";
@forward "../input";

////
/// Password input component
///
/// @group components/password-input
////

@include nhsuk-exports("nhsuk/components/password-input") {
  .nhsuk-password-input__input {
    // IE 11 and Microsoft Edge comes with its own password reveal function. We
    // want to hide it, so that there aren't two controls presented to the user
    // that do the same thing but aren't in sync with one another. This doesn't
    // affect the function that allows Edge users to toggle password visibility
    // by pressing Alt+F8, which cannot be programmatically disabled.
    &::-ms-reveal {
      display: none;
    }
  }

  .nhsuk-password-input__toggle {
    // Hide the button by default, JS removes this attribute
    &[hidden] {
      display: none;
    }

    @include nhsuk-media-query($from: mobile) {
      flex-basis: 5em;
    }
  }
}