/* =========================================================
   File: public/assets/marketv2/components/password-field/password-field.css
   Market UI v2 - Password Field Component

   Canonical Notes
   ---------------------------------------------------------
   - render only
   - consumes only render tokens from variables.css
   - no theme logic
   - no business logic
   - preserves current behavior
========================================================= */


/* =========================================================
   ROOT
========================================================= */

.m-password-field {
    position: relative;
    min-width: 0;
}


/* =========================================================
   MAIN WRAPPER
========================================================= */

.m-password-field__main {
    position: relative;
    min-width: 0;
}


/* =========================================================
   CONTROL WRAP EXTENSION
========================================================= */

.m-password-field .m-field__control-wrap {
    position: relative;
    z-index: 2;
}

.m-password-field__label-row {
    margin-bottom: var(--m-form-label-margin-bottom, .35rem);
}

.m-password-field .m-field__control-wrap > .m-helper {
    position: absolute;
    inset-inline-end: calc(var(--password_field_action_inset_end) + var(--password_field_toggle_size_md) + 6px);
    top: 50%;
    z-index: 4;
    transform: translateY(-50%);
}

.m-password-field:not([data-password-toggle="true"]) .m-field__control-wrap > .m-helper {
    inset-inline-end: var(--password_field_action_inset_end);
}


/* =========================================================
   INPUT PADDING FOR ACTION BUTTONS
========================================================= */

.m-password-field .m-control {
    padding-inline-start: var(--m-form-current-padding-inline, var(--form_padding_x_md, 15px));
    padding-inline-end: var(--password_field_input_padding_end_md);
}

.m-password-field.has-help .m-control {
    padding-inline-end: calc(var(--password_field_input_padding_end_md) + 2rem);
}

.m-password-field.m-control-sm .m-control {
    padding-inline-start: var(--m-form-padding-inline-sm, var(--form_padding_x_sm, 12px));
    padding-inline-end: var(--password_field_input_padding_end_sm);
}

.m-password-field.m-control-sm.has-help .m-control {
    padding-inline-end: calc(var(--password_field_input_padding_end_sm) + 1.8rem);
}

.m-password-field.m-control-lg .m-control {
    padding-inline-start: var(--m-form-padding-inline-lg, var(--form_padding_x_lg, 18px));
    padding-inline-end: var(--password_field_input_padding_end_lg);
}

.m-password-field.m-control-lg.has-help .m-control {
    padding-inline-end: calc(var(--password_field_input_padding_end_lg) + 2.1rem);
}


/* =========================================================
   COEXIST WITH FORMS CLEAR BUTTON
========================================================= */

.m-password-field.has-value .m-field__control-wrap:has(.m-field__clear) .m-control {
    padding-inline-start: var(--m-form-current-padding-inline, var(--form_padding_x_md, 15px));
    padding-inline-end: calc(
        var(--password_field_action_inset_end) +
        var(--password_field_toggle_size_md) +
        var(--m-form-clear-size, 30px) +
        14px
    );
}

.m-password-field.m-control-sm.has-value .m-field__control-wrap:has(.m-field__clear) .m-control {
    padding-inline-start: var(--m-form-padding-inline-sm, var(--form_padding_x_sm, 12px));
    padding-inline-end: calc(
        var(--password_field_action_inset_end) +
        var(--password_field_toggle_size_sm) +
        var(--m-form-clear-size, 30px) +
        12px
    );
}

.m-password-field.m-control-lg.has-value .m-field__control-wrap:has(.m-field__clear) .m-control {
    padding-inline-start: var(--m-form-padding-inline-lg, var(--form_padding_x_lg, 18px));
    padding-inline-end: calc(
        var(--password_field_action_inset_end) +
        var(--password_field_toggle_size_lg) +
        var(--m-form-clear-size, 30px) +
        16px
    );
}


/* =========================================================
   TOGGLE BUTTON
========================================================= */

.m-password-field__toggle {
    position: absolute;
    inset-inline-end: var(--password_field_action_inset_end);
    top: 50%;
    transform: translateY(-50%);

    z-index: 3;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex: 0 0 auto;

    width: var(--password_field_toggle_size_md);
    height: var(--password_field_toggle_size_md);

    margin: 0;
    padding: 0;

    border: var(--m-field-border-width) solid var(--password_field_toggle_border);
    border-radius: var(--password_field_toggle_radius);

    background: var(--password_field_toggle_bg);
    color: var(--password_field_toggle_text);

    cursor: pointer;
    user-select: none;

    transition:
        inset-inline-end var(--password_field_transition_fast),
        background-color var(--password_field_transition_fast),
        color var(--password_field_transition_fast),
        border-color var(--password_field_transition_fast),
        box-shadow var(--password_field_transition_fast),
        opacity var(--password_field_transition_fast);
}

.m-password-field .m-field__clear {
    inset-inline-end: var(--password_field_action_inset_end);
}

.m-password-field.has-value .m-field__control-wrap:has(.m-field__clear) .m-password-field__toggle {
    inset-inline-end: calc(
        var(--password_field_action_inset_end) +
        var(--m-form-clear-size, 30px) +
        6px
    );
}

.m-password-field.m-control-sm .m-password-field__toggle {
    width: var(--password_field_toggle_size_sm);
    height: var(--password_field_toggle_size_sm);
}

.m-password-field.m-control-lg .m-password-field__toggle {
    width: var(--password_field_toggle_size_lg);
    height: var(--password_field_toggle_size_lg);
}

.m-password-field__toggle:hover {
    background: var(--password_field_toggle_hover_bg);
    color: var(--password_field_toggle_hover_text);
    border-color: var(--password_field_toggle_hover_border);
}

.m-password-field__toggle:focus,
.m-password-field__toggle:focus-visible {
    outline: none;
    background: var(--password_field_toggle_focus_bg);
    color: var(--password_field_toggle_focus_text);
    border-color: var(--password_field_toggle_focus_border);
    box-shadow: var(--password_field_toggle_focus_ring);
}

.m-password-field__toggle:disabled {
    background: var(--password_field_toggle_disabled_bg);
    color: var(--password_field_toggle_disabled_text);
    border-color: var(--password_field_toggle_disabled_border);
    cursor: not-allowed;
    opacity: .7;
}

.m-password-field__toggle svg,
.m-password-field__toggle i,
.m-password-field__toggle span[aria-hidden="true"] {
    width: var(--password_field_icon_size_md);
    height: var(--password_field_icon_size_md);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    line-height: 1;
    font-size: var(--password_field_icon_size_md);
    pointer-events: none;
}

.m-password-field__help-trigger {
    position: absolute;
    inset-inline-end: calc(var(--password_field_action_inset_end) + var(--password_field_toggle_size_md) + 6px);
    top: 50%;
    z-index: 4;
    transform: translateY(-50%);
}

.m-password-field:not([data-password-toggle="true"]) .m-password-field__help-trigger {
    inset-inline-end: var(--password_field_action_inset_end);
}

.m-password-field__hint.m-field-help-bubble {
    color: var(--m-form-text);
}

.m-password-field.m-control-sm .m-password-field__toggle svg,
.m-password-field.m-control-sm .m-password-field__toggle i,
.m-password-field.m-control-sm .m-password-field__toggle span[aria-hidden="true"] {
    width: var(--password_field_icon_size_sm);
    height: var(--password_field_icon_size_sm);
    font-size: var(--password_field_icon_size_sm);
}

.m-password-field.m-control-lg .m-password-field__toggle svg,
.m-password-field.m-control-lg .m-password-field__toggle i,
.m-password-field.m-control-lg .m-password-field__toggle span[aria-hidden="true"] {
    width: var(--password_field_icon_size_lg);
    height: var(--password_field_icon_size_lg);
    font-size: var(--password_field_icon_size_lg);
}


/* =========================================================
   PANEL ANCHOR
========================================================= */

.m-password-field__panel-anchor {
    position: relative;
    min-width: 0;
}


/* =========================================================
   STRONG PASSWORD MODE WRAPPER
========================================================= */

.m-password-field__strong {
    display: flex;
    flex-direction: column;
    gap: var(--password_field_meta_margin_top);

    margin-top: var(--password_field_meta_margin_top);
}

.m-password-field__strong[hidden] {
    display: none !important;
}


/* =========================================================
   STRENGTH METER WRAPPER
========================================================= */

.m-password-field__strength {
    display: flex;
    flex-direction: column;
    gap: var(--password_field_strength_gap);
}

.m-password-field__strength[hidden] {
    display: none !important;
}


/* =========================================================
   STRENGTH TRACK
========================================================= */

.m-password-field__strength-track {
    width: 100%;
    height: var(--password_field_strength_bar_height);

    overflow: hidden;

    border: var(--m-field-border-width) solid var(--password_field_strength_track_border);
    border-radius: var(--password_field_strength_radius);

    background: var(--password_field_strength_track_bg);
}


/* =========================================================
   STRENGTH FILL
========================================================= */

.m-password-field__strength-fill {
    width: 0%;
    height: 100%;

    border-radius: inherit;
    background: var(--password_field_strength_empty_bg);

    transition:
        width var(--password_field_transition_soft),
        background-color var(--password_field_transition_soft);
}

.m-password-field[data-strength="0"] .m-password-field__strength-fill {
    width: 0%;
    background: var(--password_field_strength_fill_0);
}

.m-password-field[data-strength="1"] .m-password-field__strength-fill {
    width: 25%;
    background: var(--password_field_strength_fill_1);
}

.m-password-field[data-strength="2"] .m-password-field__strength-fill {
    width: 50%;
    background: var(--password_field_strength_fill_2);
}

.m-password-field[data-strength="3"] .m-password-field__strength-fill {
    width: 75%;
    background: var(--password_field_strength_fill_3);
}

.m-password-field[data-strength="4"] .m-password-field__strength-fill {
    width: 100%;
    background: var(--password_field_strength_fill_4);
}


/* =========================================================
   STRENGTH LABEL
========================================================= */

.m-password-field__strength-label {
    color: var(--password_field_strength_label_text);
    font-size: var(--password_field_strength_label_font_size);
    line-height: 1.5;
}

.m-password-field[data-strength="0"] .m-password-field__strength-label {
    color: var(--password_field_strength_text_0);
}

.m-password-field[data-strength="1"] .m-password-field__strength-label {
    color: var(--password_field_strength_text_1);
}

.m-password-field[data-strength="2"] .m-password-field__strength-label {
    color: var(--password_field_strength_text_2);
}

.m-password-field[data-strength="3"] .m-password-field__strength-label {
    color: var(--password_field_strength_text_3);
}

.m-password-field[data-strength="4"] .m-password-field__strength-label {
    color: var(--password_field_strength_text_4);
}


/* =========================================================
   MATCH STATE MESSAGE
========================================================= */

.m-password-field__match {
    display: none;

    margin-top: var(--password_field_meta_margin_top);
    padding: var(--password_field_match_padding_y) var(--password_field_match_padding_x);

    border: var(--m-field-border-width) solid transparent;
    border-radius: var(--password_field_match_radius);

    font-size: var(--password_field_match_font_size);
    line-height: 1.5;
}

.m-password-field.is-match .m-password-field__match {
    display: block;
    color: var(--password_field_match_text);
    background: var(--password_field_match_bg);
    border-color: var(--password_field_match_border);
}

.m-password-field.is-mismatch .m-password-field__match {
    display: block;
    color: var(--password_field_mismatch_text);
    background: var(--password_field_mismatch_bg);
    border-color: var(--password_field_mismatch_border);
}


/* =========================================================
   REQUIREMENTS PANEL
========================================================= */

.m-password-field__requirements {
    display: flex;
    flex-direction: column;
    gap: var(--password_field_requirements_list_gap);

    margin-top: var(--password_field_requirements_margin_top);
    padding: var(--password_field_requirements_padding_y) var(--password_field_requirements_padding_x);

    border: var(--m-field-border-width) solid var(--password_field_requirements_border);
    border-radius: var(--password_field_requirements_radius);

    background: var(--password_field_requirements_bg);
    box-shadow: var(--password_field_requirements_shadow);
}

.m-password-field__requirements[hidden] {
    display: none !important;
}

.m-password-field__requirements-title {
    margin: 0;

    color: var(--password_field_requirements_title_text);
    font-size: var(--password_field_meta_font_size);
    font-weight: 700;
    line-height: 1.5;
}


/* =========================================================
   REQUIREMENTS LIST ITEM
========================================================= */

.m-password-field__requirement {
    display: flex;
    align-items: center;
    gap: var(--password_field_requirements_gap);

    min-width: 0;

    color: var(--password_field_requirement_text);
    font-size: var(--password_field_requirement_font_size);
    line-height: 1.5;
}

.m-password-field__requirement::before {
    content: "";

    width: var(--password_field_requirement_dot_size);
    height: var(--password_field_requirement_dot_size);
    flex: 0 0 auto;

    border-radius: var(--password_field_requirement_radius);
    background: var(--password_field_requirement_dot_bg);

    transition:
        background-color var(--password_field_transition_fast),
        transform var(--password_field_transition_fast);
}

.m-password-field__requirement.is-pass {
    color: var(--password_field_requirement_pass_text);
}

.m-password-field__requirement.is-pass::before {
    background: var(--password_field_requirement_pass_dot_bg);
}

.m-password-field__requirement.is-fail {
    color: var(--password_field_requirement_fail_text);
}

.m-password-field__requirement.is-fail::before {
    background: var(--password_field_requirement_fail_dot_bg);
}


/* =========================================================
   STATE HELPERS
========================================================= */

.m-password-field.is-visible .m-password-field__toggle {
    color: var(--password_field_action_hover_text);
}

.m-password-field.is-error .m-password-field__strength-label,
.m-password-field.is-error .m-password-field__requirements-title {
    color: var(--password_field_error_text);
}

.m-password-field.is-success .m-password-field__strength-label,
.m-password-field.is-success .m-password-field__requirements-title {
    color: var(--password_field_success_text);
}


/* =========================================================
   MOBILE TUNING
========================================================= */

@media (max-width: 767.98px) {
    .m-password-field .m-control {
        min-height: max(var(--m-form-current-height), 2.75rem);
    }

    .m-password-field__requirements {
        max-width: 100%;
    }
}