/* =========================================================
   Market UI v2 - Input Field Component
   Path: public/assets/marketv2/components/input-field/input-field.css

   Supports:
   - label
   - help / error / success
   - prefix / suffix
   - clear button
   - compact / inline
   - disabled / readonly
   - validation states
   - search mode

   Canonical Notes
   ---------------------------------------------------------
   - consumes only component aliases / contract
   - does not create a palette
   - does not read runtime context directly
   - preserves current DOM
========================================================= */


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

.m-input-field {
    position: relative;
    width: 100%;
    min-width: 0;
}

.m-input-field__label {
    display: block;
    margin-bottom: var(--input_field_label_margin_bottom);

    color: var(--input_field_label_text);
    font-size: var(--input_field_label_font_size);
    font-weight: var(--input_field_label_font_weight);
    line-height: var(--input_field_label_line_height);
}

.m-input-field__label-row {
    margin-bottom: var(--input_field_label_margin_bottom);
}

.m-input-field__required {
    color: var(--input_field_required_text);
}


/* =========================================================
   CONTROL
========================================================= */

.m-input-field__control {
    position: relative;
    display: flex;
    align-items: center;

    width: 100%;
    min-width: 0;
    height: var(--input_field_height_md);
    min-height: var(--input_field_height_md);

    border: var(--m-field-border-width) solid var(--input_field_border_color);
    border-radius: var(--input_field_radius_md);

    background: var(--input_field_bg);
    color: var(--input_field_text_color);
    box-shadow: var(--input_field_shadow);

    transition:
        border-color var(--input_field_transition_base),
        box-shadow var(--input_field_transition_base),
        background-color var(--input_field_transition_base),
        color var(--input_field_transition_base);
}

.m-input-field__control > .m-helper {
    margin-inline-end: .35rem;
}


/* =========================================================
   INPUT
========================================================= */

.m-input-field__input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: 100%;

    padding-inline: var(--input_field_padding_x_md);

    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;

    color: var(--input_field_text_color);
    font-size: var(--input_field_font_size_md);
    line-height: var(--input_field_text_line_height);
}

.m-input-field__input::placeholder {
    color: var(--input_field_placeholder_text);
}

.m-input-field__input:disabled,
.m-input-field.is-disabled .m-input-field__input {
    cursor: not-allowed;
}

.m-input-field.is-readonly .m-input-field__input,
.m-input-field__input[readonly] {
    cursor: default;
}

.m-input-field.is-textarea .m-input-field__control {
    align-items: flex-start;
    height: auto;
    min-height: calc(var(--input_field_height_md) * 2);
}

.m-input-field.is-textarea .m-input-field__input {
    min-height: calc(var(--input_field_height_md) * 2);
    padding-block: var(--input_field_padding_x_md);
    resize: vertical;
}


/* =========================================================
   PREFIX / SUFFIX
========================================================= */

.m-input-field__prefix,
.m-input-field__suffix {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    flex: 0 0 auto;

    padding-inline: var(--input_field_prefix_gap);

    border: 0;
    background: var(--input_field_affix_bg);
    color: var(--input_field_affix_text);

    font-size: var(--input_field_icon_size_md);
}


/* =========================================================
   CLEAR BUTTON
========================================================= */

.m-input-field__clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    width: var(--input_field_clear_hit_size);
    height: var(--input_field_clear_hit_size);
    margin-inline-end: 4px;

    border: var(--m-field-border-width) solid var(--input_field_clear_border);
    border-radius: 999px;

    background: var(--input_field_clear_bg);
    color: var(--input_field_clear_text);

    cursor: pointer;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        background-color var(--input_field_transition_fast),
        color var(--input_field_transition_fast),
        border-color var(--input_field_transition_fast),
        opacity var(--input_field_transition_fast),
        visibility var(--input_field_transition_fast);
}

.m-input-field.has-value .m-input-field__clear {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.m-input-field__clear:hover {
    background: var(--input_field_clear_hover_bg);
    color: var(--input_field_clear_hover_text);
    border-color: var(--input_field_clear_hover_border);
}

.m-input-field__clear:active {
    background: var(--input_field_clear_active_bg);
    color: var(--input_field_clear_active_text);
    border-color: var(--input_field_clear_active_border);
}

.m-input-field__clear:focus,
.m-input-field__clear:focus-visible {
    outline: none;
}

.m-input-field.is-disabled .m-input-field__clear,
.m-input-field.is-readonly .m-input-field__clear {
    display: none;
}


/* =========================================================
   DEFAULT INTERACTION
========================================================= */

.m-input-field__control:hover {
    background: var(--input_field_hover_bg);
    border-color: var(--input_field_hover_border);
    box-shadow: var(--input_field_shadow_hover);
}

.m-input-field:focus-within .m-input-field__control {
    background: var(--input_field_focus_bg);
    border-color: var(--input_field_focus_border_color);
    box-shadow: var(--input_field_shadow_focus);
}

.m-input-field:focus-within .m-input-field__prefix,
.m-input-field:focus-within .m-input-field__suffix {
    color: var(--input_field_icon_text_focus);
}


/* =========================================================
   DISABLED
========================================================= */

.m-input-field.is-disabled .m-input-field__control {
    background: var(--input_field_disabled_background);
    border-color: var(--input_field_disabled_border_color);
    box-shadow: none;
}

.m-input-field.is-disabled .m-input-field__input,
.m-input-field.is-disabled .m-input-field__prefix,
.m-input-field.is-disabled .m-input-field__suffix {
    color: var(--input_field_disabled_text_color);
}


/* =========================================================
   READONLY
========================================================= */

.m-input-field.is-readonly .m-input-field__control {
    background: var(--input_field_readonly_background);
    border-color: var(--input_field_readonly_border_color);
}

.m-input-field.is-readonly .m-input-field__input,
.m-input-field.is-readonly .m-input-field__prefix,
.m-input-field.is-readonly .m-input-field__suffix {
    color: var(--input_field_readonly_text_color);
}


/* =========================================================
   INVALID / VALID
========================================================= */

.m-input-field.is-invalid .m-input-field__control {
    border-color: var(--input_field_invalid_border);
    box-shadow: var(--input_field_shadow_invalid);
}

.m-input-field.is-valid .m-input-field__control {
    border-color: var(--input_field_valid_border);
    box-shadow: var(--input_field_shadow_valid);
}


/* =========================================================
   HELP / ERROR / SUCCESS
========================================================= */

.m-input-field__help,
.m-input-field__error,
.m-input-field__success {
    margin-top: var(--input_field_help_margin_top);
    font-size: var(--input_field_feedback_font_size);
    line-height: var(--input_field_feedback_line_height);
}

.m-input-field__help {
    color: var(--input_field_help_text);
}

.m-input-field__help-trigger {
    margin-inline-end: 4px;
}

.m-input-field__help.m-field-help-bubble {
    margin-top: 0;
    color: var(--m-form-text);
}

.m-input-field__error {
    color: var(--input_field_error_text);
}

.m-input-field__success {
    color: var(--input_field_success_text);
}


/* =========================================================
   COMPACT MODE
========================================================= */

.m-input-field.is-compact .m-input-field__control {
    height: var(--input_field_compact_height);
}

.m-input-field.is-compact .m-input-field__input {
    padding-inline: var(--input_field_compact_padding_x);
}

.m-input-field.is-compact .m-input-field__prefix,
.m-input-field.is-compact .m-input-field__suffix {
    font-size: var(--input_field_compact_icon_size);
}


/* =========================================================
   INLINE MODE
========================================================= */

.m-input-field.is-inline {
    display: flex;
    align-items: center;
    gap: var(--input_field_inline_label_gap);
}

.m-input-field.is-inline .m-input-field__label {
    flex: 0 0 auto;
    margin-bottom: 0;
}

.m-input-field.is-inline .m-input-field__label-row {
    flex: 0 0 auto;
    margin-bottom: 0;
}

.m-input-field.is-inline .m-input-field__body {
    flex: 1 1 auto;
    min-width: 0;
}


/* =========================================================
   SEARCH MODE
========================================================= */

.m-input-field.is-search .m-input-field__prefix {
    color: var(--input_field_search_icon_text);
}

.m-input-field.is-search:focus-within .m-input-field__prefix {
    color: var(--input_field_search_icon_text_focus);
}

@media (max-width: 767.98px) {
    .m-input-field__control {
        min-height: max(var(--input_field_height_md), 2.75rem);
    }

    .m-input-field.is-inline {
        align-items: stretch;
        flex-direction: column;
        gap: var(--input_field_help_margin_top);
    }
}

/* =========================================================
   COPY FIELD COMPOSITION
========================================================= */

.m-copy-field__control {
    gap: var(--space-1, 4px);
    padding-inline-end: var(--space-1, 4px);
}

.m-copy-field__input {
    direction: ltr;
}

.m-copy-field__button {
    flex: 0 0 auto;
}