/**
 * Password component
 */

// Container of input + revealer button

.password {
    display: flex;
    align-items: center;

    // When the password visibility button is focused, keep the border blueDD.
    &:focus-within {
        .input--error {
            border-color: inherit;
        }
    }
}

// Show/hide button

.password__btn {
    position: absolute;
    right: $size-4;
    width: $size-32;
    height: $size-32;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: .1s ease-in-out;
    transition-property: opacity, visibility;
}

.password__btn--hidden {
    visibility: hidden;
    opacity: 0;
}

::-ms-reveal {
    display: none;
}