// ============================================================================
// 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);
}

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

    height: q(14);
    min-height: q(14);
    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;
    }
}

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

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

.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;
}

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

/// Default input: straight corners
.input,
input,
textarea,
select {
    @include input--base;
    @include input--style--straight;
}

.input--base--form,
input.input--base--form,
textarea.input--base--form,
select.input--base--form {
    @include input--base--form;
}

.input--base--inline,
input.input--base--inline,
textarea.input--base--inline,
select.input--base--inline {
    @include input--base--inline;
}

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

/// Straight-corner inputs
.input--style--straight,
input.input--style--straight,
textarea.input--style--straight,
select.input--style--straight {
    @include input--style--straight;
}

/// Rounded inputs
.input--style--rounded,
input.input--style--rounded,
textarea.input--style--rounded,
select.input--style--rounded {
    @include input--style--rounded;
}

/// Underlined inputs
.input--style--underline,
input.input--style--underline,
textarea.input--style--underline,
select.input--style--underline {
    @include input--style--underline;
}

/// Filled inputs
.input--style--filled,
input.input--style--filled,
textarea.input--style--filled,
select.input--style--filled {
    @include input--style--filled;
}

// -----------------------------------------------------------------------------
// Configuration
// -----------------------------------------------------------------------------

// /// Size map: [height in baseline units, font-size key]
// $input-size-map: (
//     "s": (
//         2,
//         "02"
//     ),
//     "m": (
//         3,
//         "03"
//     ),
//     "l": (
//         4,
//         "04"
//     )
// ) !default;

// -----------------------------------------------------------------------------
// Input Variants
// -----------------------------------------------------------------------------

// /// Size variant for input
// /// @param $height - Height in baseline units
// /// @param $font-size-key - Font size token
// @mixin input($height, $font-size-key) {
//     @include input--base;
//     @include font--size($font-size-key);
//     padding: baseline($height);
// }

// -----------------------------------------------------------------------------
// Utilities
// -----------------------------------------------------------------------------

// /// Default `.input` class
// .input {
//     @include input(
//         list.nth(map.get($input-size-map, "m"), 1),
//         list.nth(map.get($input-size-map, "m"), 2)
//     );
// }

// /// Utility modifiers like `.input--s`, `.input--l`
// @each $name, $pair in $input-size-map {
//     .input--#{$name} {
//         @include input(list.nth($pair, 1), list.nth($pair, 2));
//     }
// }

// input[type='text'],
// input[type='email'],
// textarea {
//     @include reset_bleed;
//     padding: 0;
//     @include font--default;
//     @include font--weight_300;
//     @include font--size_04;
//     // background-color: WhiteSmoke;
//     margin-top: 8 * $q;
//     margin-bottom: 8 * $q;
// }