////
///
/// Input Utility Classes
/// ===========================================================================
///
/// CSS classes for form inputs, selects, and textareas.
/// All functionality is defined in mixins - classes only include them.
///
/// @group Classes.BodyAtoms.Inputs
/// @author Scape Agency
/// @link https://scape.style
/// @since 0.1.0 initial release
/// @access public
///
////

// ============================================================================
// Use
// ============================================================================

@use "../../../dev" as *;
@use "../../../mixins" as *;

// ============================================================================
// Base Input Classes
// ============================================================================

/// Base input styles
.input {
    @include input--base--form;
    @include input--size-md;
    line-height: 1.5;
    background-color: var(--color_fill_primary);
    border: q(1) solid var(--color_line_primary);
    border-radius: var(--corner_radius_02);
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;

    &::placeholder {
        color: var(--color_text_tertiary);
    }

    &:hover {
        @include input--hover;
    }

    &:focus {
        @include input--focus;
    }

    &:disabled,
    &[disabled] {
        @include input--disabled;
    }

    &[readonly] {
        @include input--readonly;
    }
}

// ============================================================================
// Input Style Variants
// ============================================================================

/// Straight-corner input
.input--style--straight {
    @include input--style--straight;
}

/// Rounded input
.input--style--rounded {
    @include input--style--rounded;
}

/// Underlined input
.input--style--underline {
    @include input--style--underline;
}

/// Filled input
.input--style--filled {
    @include input--style--filled;
}

// ============================================================================
// Input Sizes
// ============================================================================

/// Small input
.input--size-sm {
    @include input--size-sm;
}

/// Medium input
.input--size-md {
    @include input--size-md;
}

/// Large input
.input--size-lg {
    @include input--size-lg;
}

// ============================================================================
// Input States
// ============================================================================

/// Valid input
.input--valid {
    @include input--valid;
}

/// Invalid input
.input--invalid {
    @include input--invalid;
}

/// Warning input
.input--warning {
    @include input--warning;
}

/// Disabled input
.input--disabled {
    @include input--disabled;
}

/// Readonly input
.input--readonly {
    @include input--readonly;
}

/// Hover input
.input--hover {
    @include input--hover;
}

/// Focus input
.input--focus {
    @include input--focus;
}

// ============================================================================
// Textarea Classes
// ============================================================================

/// Textarea styles
.textarea {
    @include textarea--base;
    background-color: var(--color_fill_primary);
    border: q(1) solid var(--color_line_primary);
    border-radius: var(--corner_radius_02);
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;

    &::placeholder {
        color: var(--color_text_tertiary);
    }

    &:hover {
        @include input--hover;
    }

    &:focus {
        @include input--focus;
    }

    &:disabled,
    &[disabled] {
        @include input--disabled;
    }
}

/// Non-resizable textarea
.textarea--no-resize {
    @include textarea--no-resize;
}

/// Horizontal resize only
.textarea--resize-x {
    @include textarea--resize-x;
}

/// Both directions resize
.textarea--resize-both {
    @include textarea--resize-both;
}

// ============================================================================
// Select Classes
// ============================================================================

/// Select styles
.select {
    @include select--base;
    background-color: var(--color_fill_primary);
    border: q(1) solid var(--color_line_primary);
    border-radius: var(--corner_radius_02);
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;

    &:hover {
        @include input--hover;
    }

    &:focus {
        @include input--focus;
    }

    &:disabled,
    &[disabled] {
        @include input--disabled;
    }
}

// ============================================================================
// Range Classes
// ============================================================================

/// Range input (slider)
.input--range {
    @include input--range;
}

/// Range input with filled track progress indicator
.input--range--filled {
    @include input--range--filled;
}

// ============================================================================
// Checkbox & Radio Classes
// ============================================================================

/// Checkbox wrapper
.checkbox {
    @include checkbox--wrapper;
}

/// Radio wrapper
.radio {
    @include radio--wrapper;
}

/// Radio input (styled)
.input--radio {
    @include input--radio;
}

// ============================================================================
// Input Group Classes
// ============================================================================

/// Input group (input with addons)
.input-group {
    @include input-group;

    > .input {
        flex: 1 1 auto;
        min-width: 0;
        border-radius: 0;

        &:first-child {
            border-top-left-radius: var(--corner_radius_02);
            border-bottom-left-radius: var(--corner_radius_02);
        }

        &:last-child {
            border-top-right-radius: var(--corner_radius_02);
            border-bottom-right-radius: var(--corner_radius_02);
        }
    }
}

/// Input addon
.input-addon {
    @include input-addon;

    &:first-child {
        border-right: 0;
        border-top-left-radius: var(--corner_radius_02);
        border-bottom-left-radius: var(--corner_radius_02);
    }

    &:last-child {
        border-left: 0;
        border-top-right-radius: var(--corner_radius_02);
        border-bottom-right-radius: var(--corner_radius_02);
    }
}