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

@use "sass:map";
@use "sass:list";

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

@use "../soul_type" as *;

// /// Styles for form input fields
// /// @group Form
// input {
// 	outline: none;
// 	border: none;
//     height: baseline(4);
//     @include font-size_03;
// }

// ============================================================================
// FORM / INPUT / TEXTAREA / SELECT
// ============================================================================

// button .i {
//     pointer-events: none;
// }
/// @group Form
/// Size map like the button map: height in baseline units + font-size key
$input-size-map: (
    "s": (
        2,
        "02"
    ),
    "m": (
        3,
        "03"
    ),
    "l": (
        4,
        "04"
    )
) !default;

///
///
/// Base input style
///
@mixin input--base {
    display: flex;
    align-items: center;
    gap: baseline(1);
    align-self: stretch;
    border-radius: 0;
    // border-radius: q(4);
    // border: q(1) solid var(--color_text_primary);
    color: var(--color_text_primary);
    transition: border 0.2s ease;
    pointer-events: initial;
    cursor: text;
    background: var(--color_fill_primary);

    // &:hover {
    //     border-color: var(--color_text_primary);
    // }

    // &:focus {
    //     border: q(3) solid hue_color("N2404");
    // }

    // &:disabled {
    //     border-color: hue_color("N0005");
    //     color: var(--color_state_muted);
    //     background: hue_color("N0001");
    //     cursor: not-allowed;
    // }

    // &.is-success {
    //     border-color: var(--color_log_success);
    //     color: var(--color_log_success);
    //     background-color: hue_color("N1651");
    // }

    // &.is-warning {
    //     border-color: var(--color_log_warning);
    //     color: var(--color_log_warning);
    //     background: hue_color("N0301");
    // }

    // &.is-error {
    //     border-color: var(--color_log_error);
    //     color: var(--color_log_error);
    //     background: hue_color("N3601");
    // }

    // &.is-info {
    //     border-color: var(--color_log_info);
    //     color: var(--color_log_info);
    //     background: hue_color("N2401");
    // }
}

/// @group Form
/// Sizing mixin for input fields (baseline-based padding + font size)
/// @param $height — in baseline units
/// @param $font-size-key — design system font token
@mixin input($height, $font-size-key) {
    @include input--base;
    @include font--size($font-size-key);
    padding: baseline($height);
}

/// Apply default input styling to `.input`
.input {
    @include input(
        list.nth(map.get($input-size-map, "m"), 1),
        list.nth(map.get($input-size-map, "m"), 2)
    );
}

/// Generate utility classes for sizes like `.input--s`
@each $name, $pair in $input-size-map {
    .input--#{$name} {
        @include input(list.nth($pair, 1), list.nth($pair, 2));
    }
}

// Form | Fieldset | Input
// ----------------------------------------------------------------------------

/// Input element styling.
/// Resets default styles for inputs for better cross-browser consistency.
/// @group Form
input {
    border-radius: 0;
    outline: none;
    border: none;
}

// /* FORM / INPUT / TEXTAREA / SELECT
// -------------------------------------------- */

// @media only screen and (min-width: 99q(2))
// {
//     label::before
//     {
//         font-size: .875rem;

//         position: absolute;
//         top: calc(50% - .75em);
//         left: -3.75rem;

//         content: attr(data-number);

//         color: var(--color-3);
//     }
// }

// input[type=text],
// input[type=date],
// input[type=email],
// input[type=password],
// input[type=tel],
// input[type=url],
// input[type=search],
// input[type=number],
// input[type=file],
// textarea,
// select
// {
//     font-size: q(16);

//     display: block;

//     width: 100%;
//     margin: 0;
//     padding: 0 0 .625rem 0;

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

//     color: var(--color-primary);
//     border: none;
//     border-bottom: q(1) solid var(--color-14);
//     border-radius: 0;
//     outline: none;
//     background-color: transparent;
//     -webkit-@include shadow--none;
//             @include shadow--none;

//     -webkit-appearance: none;
//        -moz-appearance: none;
//             appearance: none;
// }
// input[type=text].is-large,
// input[type=date].is-large,
// input[type=email].is-large,
// input[type=password].is-large,
// input[type=tel].is-large,
// input[type=url].is-large,
// input[type=search].is-large,
// input[type=number].is-large,
// input[type=file].is-large,
// textarea.is-large,
// select.is-large
// {
//     font-size: 2.25rem;
// }
// input[type=text].style-2,
// input[type=date].style-2,
// input[type=email].style-2,
// input[type=password].style-2,
// input[type=tel].style-2,
// input[type=url].style-2,
// input[type=search].style-2,
// input[type=number].style-2,
// input[type=file].style-2,
// textarea.style-2,
// select.style-2
// {
//     font-size: .875rem;

//     padding: .8125rem 1.4375rem;

//     border: q(1) solid var(--color-3);
//     background-color: var(--white-color);
// }