/**
 * ----------------------------------------------------------------------------------------
 * Wooptima | Forms | Password toggle
 * ----------------------------------------------------------------------------------------
 * Class names follow WooCommerce (.password-input / .show-password-input / .display-password)
 * so this styles both the buttons wa-password-toggle.js adds and the ones WooCommerce's own
 * frontend script appends in the checkout.
 *
 * The icons are the Lucide outline eye / eye-off, drawn through a CSS mask instead of a
 * background image, so the colour is a normal CSS property — grey at rest, dark on hover,
 * accent while the password is on screen.
 *
 * !important appears only where Oxygen's global button and input rules would otherwise win;
 * they set padding, background and borders on every button on the page.
 * ----------------------------------------------------------------------------------------
 */

.password-input {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

/* Room for the eye, so a long password never runs underneath it. */
.password-input input[type="password"],
.password-input input[type="text"] {
    width: 100%;
    padding-right: 2.9rem !important;
}

/* Edge draws an eye of its own inside password fields — one is enough. */
.password-input input::-ms-reveal {
    display: none;
}

.password-input .show-password-input {
    position: absolute;
    top: 50%;
    right: 0.85rem;
    transform: translateY(-50%);
    display: block;
    width: 22px;
    height: 22px;
    min-width: 0;
    min-height: 0;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 4px;
    background: none !important;
    box-shadow: none !important;
    line-height: 0;
    text-decoration: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.password-input .show-password-input::before {
    content: "";
    display: block;
    width: 22px;
    height: 22px;
    background-color: #9E9E9E;
    transition: background-color 150ms ease-in-out;

    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><line x1="2" y1="2" x2="22" y2="22"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><line x1="2" y1="2" x2="22" y2="22"/></svg>');

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.password-input .show-password-input:hover::before {
    background-color: #4A4A4A;
}

/* Password on screen — plain eye, and the accent makes the state obvious at a glance. */
.password-input .show-password-input.display-password::before {
    background-color: #00AEEF;

    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="3"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="3"/></svg>');
}

.password-input .show-password-input.display-password:hover::before {
    background-color: #0098CE;
}

/* Keyboard users need to see where they are; a mouse click must not draw a ring. */
.password-input .show-password-input:focus {
    outline: none;
}

.password-input .show-password-input:focus-visible {
    outline: 2px solid #00AEEF;
    outline-offset: 2px;
}

/*
 * The inline login in the checkout puts the field and the submit button in a grid; the
 * wrapper takes the field's cell, and the field keeps the panel's own height.
 */
.wa-cgl-panel .password-input {
    height: 100%;
}