/**
 * Login password show/hide (eye) toggle.
 *
 * The toggle button sits inside the password field at its right edge. To keep the
 * eye attached to the field (and the username and password fields the same width),
 * both login inputs are forced to fill their container with border-box sizing,
 * independent of the customer layout's own width rules. The password field then
 * exactly fills the relative wrapper, so the absolutely positioned eye lands at the
 * field's right edge. Extra right padding keeps the typed text off the icon, and the
 * native reveal control of legacy Edge / IE is suppressed so only one eye is shown.
 *
 * !important is used on the width / box-sizing / right-padding declarations on
 * purpose: the customer login layout (baseLogin.html inline style, rendered after
 * this stylesheet, plus the runtime layout.css) carries equal-or-higher-specificity
 * rules for `.form-signin input`, and the toggle layout must win over all of them so
 * the eye stays attached regardless of the deployed layout.
 */

/* Username and password fields: identical full width so their right edges align. */
.form-signin input[type="text"],
.form-signin input[type="password"] {
    width: 100% !important;
    box-sizing: border-box !important;
}

.js-password-toggle-wrap {
    position: relative;
    display: block;
}

/* Password field fills the wrapper; right padding keeps the text off the eye. */
.js-password-toggle-wrap > input {
    display: block;
    padding-right: 36px !important;
}

.js-password-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    color: #5a5a5a;
    cursor: pointer;
    line-height: 1;
    font-size: 16px;
    text-align: center;
}

.js-password-toggle:hover,
.js-password-toggle:focus {
    color: #333333;
    outline: none;
}

/* Suppress the native password reveal control in legacy Edge / IE. */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
}