/*
 * The reveal control inside a password input.
 *
 * Deliberately structural only: position, size and icon state. Nothing here sets a colour, a font
 * or a border, so the control inherits whatever the surrounding design system gives the field - the
 * storefront's Bootstrap forms, the standalone backoffice account page and the marketing modal all
 * render it in their own palette without this file knowing about any of them.
 *
 * .password-field is the positioning context. It is a block wrapper around exactly one input and
 * one .password-toggle, which is why the button can be absolutely positioned without being pulled
 * out of the field's own validation layout - the .invalid-feedback stays a sibling of the wrapper.
 */

.password-field {
    position: relative;
    display: block;
}

/*
 * 44px is the smallest comfortable touch target, and the reason the input needs the room.
 *
 * The width is in rem so the control grows with the type around it, but the minimum is in px: rem
 * is relative to the root font size, and a visitor who has set a smaller default in their browser
 * would otherwise get a target under 44px - the visitor least able to afford a small one. At the
 * 16px default the two agree exactly, so this costs nothing in the ordinary case.
 */
.password-toggle {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    min-width: 44px;
    min-height: 44px;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    opacity: 0.62;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.password-toggle:hover,
.password-toggle:focus-visible {
    opacity: 1;
}

/* The focus ring has to be visible against the input's own border, which the button overlaps. */
.password-toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -4px;
    border-radius: 0.375rem;
}

.password-toggle[disabled] {
    opacity: 0.3;
    cursor: default;
}

.password-toggle-icon {
    width: 1.25rem;
    height: 1.25rem;
    pointer-events: none;
}

/* One icon per state, chosen by the same attribute that announces the state. */
.password-toggle-icon-hide,
.password-toggle[aria-pressed="true"] .password-toggle-icon-show {
    display: none;
}

.password-toggle[aria-pressed="true"] .password-toggle-icon-hide {
    display: block;
}

/*
 * Room for the button on the Bootstrap-styled forms (login, register, reset confirm, checkout,
 * account). .is-invalid also carries Bootstrap's own right-hand icon and its own padding-right, so
 * both have to move aside rather than sit under the button.
 */
.password-field > .form-control {
    padding-right: calc(44px + 0.5rem);
}

.password-field > .form-control.is-invalid,
.password-field > .form-control.is-valid {
    padding-right: calc(44px + 0.5rem);
    background-position: right calc(44px + 0.5rem) center;
}