.password-reset {
    margin-block: 1rem;

    p {
        display: flex;
        flex-flow: column nowrap;
        margin: 0;
        gap: 0.25rem;
    }

    .info {
        font-weight: bold;
        padding: 0.2rem 0.5rem;
        border-radius: 0.2rem;
        margin-block: 0.5rem;
    }

    .success {
        background-color: var(--colour-green);
    }

    .error {
        background-color: var(--colour-red);
    }
}

#password-change-dialog {
    width: min(25rem, 90vw);
}

p:has(#new-password) {
    &[data-score='0'] {
        --data-score: 0;
        --data-bg: var(--colour-dark-red);
    }

    &[data-score='1'] {
        --data-score: 1;
        --data-bg: var(--colour-dark-red);

    }

    &[data-score='2'] {
        --data-score: 2;
        --data-bg: var(--colour-dark-red);

    }

    &[data-score='3'] {
        --data-score: 3;
        --data-bg: var(--colour-green);

    }

    &[data-score='4'] {
        --data-score: 4;
        --data-bg: var(--colour-green);

    }

    &::after {
        display: block;
        width: max(1px, calc(25% * var(--data-score)));
        height: 0.2rem;
        content: '';
        background-color: var(--data-bg);
    }
}

.password-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
}

.password-wrapper > * {
    grid-column: 1;
}

.password-wrapper > input,
.password-wrapper > .password-input,
.password-wrapper > .password-toggle {
    grid-row: 1;
}

.password-wrapper input {
    width: 100%;
    padding-right: 2.5rem !important; /* ensure space for icon */
}

/* Hide WooCommerce's native show/hide toggle */
.password-wrapper .show-password-input,
.password-input .show-password-input {
    display: none !important;
}

.password-toggle {
    align-self: center;
    justify-self: end;
    margin-right: 0.625rem;
    width: 1.5rem;
    height: 1.5rem;
    z-index: 2;
    cursor: pointer;
    border: none;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--colour-dark-blue, #132442);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'%3E%3C/path%3E%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'%3E%3C/path%3E%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3C/svg%3E");
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
}

.password-toggle.visible {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'%3E%3C/path%3E%3Cline x1='1' y1='1' x2='23' y2='23'%3E%3C/line%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'%3E%3C/path%3E%3Cline x1='1' y1='1' x2='23' y2='23'%3E%3C/line%3E%3C/svg%3E");
}