/**
 * Login password show/hide (eye) toggle.
 *
 * The toggle button is absolutely positioned inside a wrapper that the JS injects
 * around the password input (see loginPasswordToggle.js). For the eye to land on the
 * field - and not on some wider container - the wrapper must be exactly as wide as the
 * input:
 *   - Customer / arbitrary layouts: the wrapper is display:inline-block, so it hugs the
 *     input's own width (e.g. a fixed-width .input-medium inside a wide
 *     .form-horizontal .controls cell). The eye then sits on the input's right edge.
 *   - edoniq default (.form-signin, baseLogin.html): the fields are full-width and
 *     stacked, so the wrapper stays display:block and the input keeps filling the card;
 *     the .form-signin width:100% rule below also aligns the username and password
 *     field widths.
 * Extra right padding (border-box) keeps the typed text off the icon without widening
 * the field, 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;
    /* inline-block so the wrapper hugs the input's own width: the absolutely
       positioned eye then lands on the field's right edge in ANY login layout,
       including customer layouts that do not use .form-signin (e.g. a Bootstrap
       .form-horizontal with a fixed-width .input-medium field inside a wide
       .controls cell). */
    display: inline-block;
    max-width: 100%;
}

/* edoniq default (baseLogin .form-signin): fields are full-width and stacked, so
   keep the wrapper block-level and let the input keep filling the login card. */
.form-signin .js-password-toggle-wrap {
    display: block;
}

/* Right padding keeps the typed text off the eye; border-box keeps that padding
   inside the field's own footprint instead of widening it. */
.js-password-toggle-wrap > input {
    display: block;
    padding-right: 36px !important;
    box-sizing: border-box !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;
}