// ============================================================================
// Elements | Form
// ============================================================================

@use "sass:map";
@use "sass:list";
@use "../../../dev" as *;
@use "../../../variables" as *;
@use "../../soul_type" as *;
@use "../../soul_object" as *;

/// @group Form

// -----------------------------------------------------------------------------
// Native Input Element Reset
// -----------------------------------------------------------------------------

///
/// Base styling for all input variants
///
@mixin input--base {
    font: inherit;
    // @include reset_bleed;
    @include shadow--none;
    @include sizing--border;
    color: var(--color_text_primary);
    background-color: transparent;
    appearance: none;
    // border: none;
    // border-color: transparent;
    outline: none;
    border-radius: 0;
    transition: all 0.2s ease;
    pointer-events: initial;
    cursor: text;

    // line-height: q(12);

    // display: block;
    // display: flex;
    // width: 100%;
    // padding: q(8) q(12);
    // align-items: center;
    // gap: baseline(1);
    // align-self: stretch;'
    // margin: 0;
    // padding: 0;

    // background-color: var(--color_fill_primary);

    // border-width: q(1);
    // border-top: q(1);
    // border-right: q(1);
    // border-bottom: q(1);
    // border-left: q(1);
    // border-style: solid;

    // transition: all var(--transition-duration) var(--transition-easing);

    // max-height: q(20); // Sets the total maximum height including borders
    // border: q(0) solid #ccc; // Optional border
}

// ----------------------------------------------------------------------------
// ----------------------------------------------------------------------------

@mixin input--base--form {
    @include input--base;
    display: block;
    width: 100%;

    // height: q(18);
    // min-height: q(18);
    // max-height: q(18);
    // height: q(20);
    // min-height: q(20);
    // max-height: q(20);
    // margin-bottom: q(10);

    height: fit-content;
    min-height: q(18);
}

@mixin input--base--inline {
    @include input--base;
    // display: inline;
    display: inline-block;

    height: fit-content;
    min-height: q(18);
    // max-height: q(14);
    // height: q(16);
    // min-height: q(16);
    // max-height: q(16);

    width: auto;
    min-width: 1ch; // Avoid collapsing completely
    field-sizing: content;
    &::placeholder {
        font: inherit;
        white-space: nowrap;
    }
}

@mixin input--sm {
    @include object--height--fixed(sm);
}

@mixin input--md {
    @include object--height--fixed(md); // uses 20q
}

@mixin input--lg {
    @include object--height--fixed(lg);
}

// ----------------------------------------------------------------------------
// ----------------------------------------------------------------------------

///
/// Input with straight corners
///
@mixin input--style--straight {
    @include input--base;
    background-color: transparent;
    border: q(1) solid var(--color_text_secondary);

    // outline-width: q(1);
    // outline-style: solid;
    // outline-color: var(--color_text_secondary);
    // outline-offset: -q(1);

    border-radius: 0;
    padding-left: q(2);
    padding-right: q(2);
}

///
/// Input with rounded corners
///
@mixin input--style--rounded {
    @include input--base;
    background-color: transparent;
    border: q(1) solid var(--color_line_primary);
    border-radius: q(4);
    padding-left: q(2);
    padding-right: q(2);
}

///
/// Underlined input style
///
@mixin input--style--underline {
    @include input--base;
    background-color: transparent;
    border-bottom: q(1) solid var(--color_line_primary);
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
}

///
/// Filled input style
///
@mixin input--style--filled {
    @include input--base;
    background-color: var(--color_fill_tertiary);
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
}

// ============================================================================
// Input Size Mixins
// ============================================================================

/// Small input size
/// @group Inputs
@mixin input--size-sm {
    padding: q(6) q(10);
    font-size: q(13);
}

/// Medium input size (default)
/// @group Inputs
@mixin input--size-md {
    padding: q(8) q(12);
    font-size: q(14);
}

/// Large input size
/// @group Inputs
@mixin input--size-lg {
    padding: q(12) q(16);
    font-size: q(16);
}

// ============================================================================
// Input State Mixins
// ============================================================================

/// Valid/Success input state
/// @group Inputs
@mixin input--valid {
    border-color: var(--color_log_success);

    &:focus {
        box-shadow: 0 0 0 q(3) var(--color_log_success--25);
    }
}

/// Invalid/Error input state
/// @group Inputs
@mixin input--invalid {
    border-color: var(--color_log_error);

    &:focus {
        box-shadow: 0 0 0 q(3) var(--color_log_error--25);
    }
}

/// Warning input state
/// @group Inputs
@mixin input--warning {
    border-color: var(--color_log_warning);

    &:focus {
        box-shadow: 0 0 0 q(3) var(--color_log_warning--25);
    }
}

/// Disabled input state
/// @group Inputs
@mixin input--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--color_state_disabled);
}

/// Readonly input state
/// @group Inputs
@mixin input--readonly {
    background-color: var(--color_fill_secondary);
}

// ============================================================================
// Input Focus Mixins
// ============================================================================

/// Input focus state
/// @group Inputs
@mixin input--focus {
    outline: none;
    border-color: var(--color_focus);
    box-shadow: 0 0 0 q(3) var(--color_focus_ring);
}

/// Input hover state
/// @group Inputs
@mixin input--hover {
    border-color: var(--color_border_hover);
}

// ============================================================================
// Textarea Mixins (moved to _input_type_textarea.scss)
// ============================================================================

/// No resize textarea
/// @group Inputs
@mixin textarea--no-resize {
    resize: none;
}

/// Horizontal resize only
/// @group Inputs
@mixin textarea--resize-x {
    resize: horizontal;
}

/// Both directions resize
/// @group Inputs
@mixin textarea--resize-both {
    resize: both;
}

// ============================================================================
// Select Mixins (moved to _input_select.scss)
// ============================================================================

// ============================================================================
// Checkbox & Radio Mixins
// ============================================================================

/// Checkbox wrapper mixin
/// @group Inputs
@mixin checkbox--wrapper {
    display: inline-flex;
    align-items: center;
    gap: q(8);
    cursor: pointer;

    input[type="checkbox"] {
        width: q(16);
        height: q(16);
        accent-color: var(--color_accent_primary);
        cursor: pointer;
    }
}

/// Radio wrapper mixin
/// @group Inputs
@mixin radio--wrapper {
    display: inline-flex;
    align-items: center;
    gap: q(8);
    cursor: pointer;

    input[type="radio"] {
        width: q(16);
        height: q(16);
        accent-color: var(--color_accent_primary);
        cursor: pointer;
    }
}

// ============================================================================
// Input Group Mixins
// ============================================================================

/// Input group mixin for atoms (basic layout)
/// @group Inputs
@mixin input-group--atom {
    display: flex;
    align-items: stretch;
}

/// Input addon mixin
/// @group Inputs
@mixin input-addon {
    display: flex;
    align-items: center;
    padding: q(8) q(12);
    font-size: q(14);
    color: var(--color_text_secondary);
    background-color: var(--color_fill_secondary);
    border: q(1) solid var(--color_line_primary);
    white-space: nowrap;
}