// ============================================================================
// Components | Form
// ============================================================================

// https://thatemil.com/blog/2015/01/03/reset-your-fieldset/

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

@use "../../body_atoms" as *;
@use "../../head_layout" as *;

@use "../../soul_type" as *;

// -----------------------------------------------------------------------------
// Imports
@use "../../../variables" as *;

@mixin form--base($gap: q(10)) {
    display: flex;
    flex-direction: column;
    gap: $gap;
}

// -----------------------------------------------------------------------------
// Form | Row (horizontal layout)
// -----------------------------------------------------------------------------

@mixin form--row($gap: q(20)) {
    @include form--base($gap);
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    // align-items: center;

    > * {
        flex: 1 1 auto;
        min-width: 0;
    }

    label {
        // margin-bottom: q(2);
    }
}

// -----------------------------------------------------------------------------
// Form | Column (vertical layout)
// -----------------------------------------------------------------------------

@mixin form--col($gap: q(10)) {
    @include form--base($gap);
    flex-direction: column;

    > * {
        width: 100%;
    }

    label {
        // margin-bottom: q(2);
    }
}

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

@mixin form__field--base($gap: q(0)) {
    @include flex--col;
    gap: $gap;
    width: 100%;
    .form__field__label,
    label {
        order: 1;
    }
    .form__field__input,
    input {
        @include input--base--form;
        order: 3;
        &[required] + label:after {
            content: "*";
            color: var(--color_log_info);
        }
    }
    .form__field__help {
        order: 2;
    }
    .form__field__error {
        order: 4;
    }
}

// -----------------------------------------------------------------------------
// Mixin: Form Field (label + input stacked)
@mixin form__field--col($gap: q(0)) {
    @include form__field--base($gap);
    @include flex--col;
}

// -----------------------------------------------------------------------------
// Mixin: Inline Label + Input (horizontal layout)
@mixin form__field--row($label-width: q(120), $gap: q(8)) {
    @include form__field--base($gap);
    @include flex--row;
    label {
        flex: 0 0 $label-width;
    }
    input,
    select,
    textarea {
        flex: 1 1 auto;
    }
}

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

@mixin form__control($gap: q(4)) {
    @include form__field--base($gap);
    flex-direction: row;
}

// ============================================================================
// Form Layout Mixins
// ============================================================================

/// Inline form layout
/// @group Forms
@mixin form--inline {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: q(12);
}

/// Horizontal form layout (labels on left)
/// @group Forms
@mixin form--horizontal {
    .form-field {
        display: grid;
        grid-template-columns: q(160) 1fr;
        gap: q(16);
        align-items: start;
    }
}

// ============================================================================
// Form Field Mixins
// ============================================================================

/// Form field wrapper mixin
/// @group Forms
@mixin form-field {
    display: flex;
    flex-direction: column;
    gap: q(4);
}

/// Inline form field mixin
/// @group Forms
@mixin form-field--inline {
    flex-direction: row;
    align-items: center;
    gap: q(8);
}

/// Required field indicator mixin
/// @group Forms
@mixin form-field--required {
    > .label--base::after {
        content: " *";
        color: var(--color_log_error);
    }
}

// ============================================================================
// Help Text & Validation Mixins
// ============================================================================

/// Help text mixin
/// @group Forms
@mixin form-help {
    font-size: q(12);
    color: var(--color_text_tertiary);
    margin-top: q(4);
}

/// Error message mixin
/// @group Forms
@mixin form-error {
    font-size: q(12);
    color: var(--color_log_error);
    margin-top: q(4);
}

/// Success message mixin
/// @group Forms
@mixin form-success {
    font-size: q(12);
    color: var(--color_log_success);
    margin-top: q(4);
}

// ============================================================================
// Form Actions Mixins
// ============================================================================

/// Form actions mixin
/// @group Forms
@mixin form-actions {
    display: flex;
    gap: q(12);
    margin-top: q(8);
}

/// Right-aligned actions mixin
/// @group Forms
@mixin form-actions--right {
    justify-content: flex-end;
}

/// Centered actions mixin
/// @group Forms
@mixin form-actions--center {
    justify-content: center;
}

/// Space between actions mixin
/// @group Forms
@mixin form-actions--between {
    justify-content: space-between;
}

// ============================================================================
// Fieldset Mixins
// ============================================================================

/// Fieldset wrapper mixin
/// @group Forms
@mixin fieldset {
    border: q(1) solid var(--color_line_primary);
    border-radius: var(--corner_radius_02);
    padding: q(16);
    margin: 0;
}

/// Fieldset legend mixin
/// @group Forms
@mixin fieldset__legend {
    font-size: q(14);
    font-weight: 600;
    padding: 0 q(8);
    color: var(--color_text_primary);
}

// ============================================================================
// Form Row Mixins
// ============================================================================

/// Form row mixin
/// @group Forms
@mixin form-row {
    display: grid;
    gap: q(16);
}

/// Form row columns mixin
/// @param {Number} $columns - Number of columns
/// @group Forms
@mixin form-row-columns($columns) {
    grid-template-columns: repeat($columns, 1fr);
}

/// Auto-fit form row mixin
/// @group Forms
@mixin form-row--auto {
    grid-template-columns: repeat(auto-fit, minmax(q(200), 1fr));
}

// Form
// ----------------------------------------------------------------------------

// /// Form element styling.
// /// Provides general styling for form elements.
// ///
// form {
//     // display: flex;
//     // justify-content: center;
//     // align-items: center;
//     max-width: 100%;
// }

// Form | Legend
// ----------------------------------------------------------------------------

// /// Legend element styling.
// /// Resets default styles for better cross-browser consistency.
// /// @group Form
// legend {
//     padding: 0;
//     border: 0; // Corrects `color` not being inherited in IE 8/9/10/11
//     color: inherit; // Ensures the color is inherited correctly
//     display: table; // Corrects text wrapping in Edge and IE
//     white-space: normal; // Corrects text wrapping in Edge and IE
//     max-width: 100%; // Ensures text wrapping in Edge 18- and IE
// }

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

// /// Fieldset element styling.
// /// Resets default styles for better cross-browser consistency.
// /// @group Form
// fieldset {
//     border: 0;
//     padding: 0Q (16) 0 0 0;
//     margin: 0;
//     min-width: 0;
// }

// body:not(:-moz-handler-blocked) fieldset {
//     display: table-cell;
// }

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

// //// ENGINE
// ///
// ///
// ///
// .form-control {
//     @include reset_bleed;
//     // width: 50%;
//     // margin: 0 auto;
//     border-bottom: q(1) solid #888;
//     border-top: 0p;
//     border-left: 0p;
//     border-right: 0;
//     border-radius: 0;
//     margin-top: 8 * $q;
//     margin-bottom: 8 * $q;
// }

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

// @mixin portal_button {
//     text-align: right;
//     padding-left: 8 * $q;
//     padding-right: 8 * $q;
//     background-color: var(--color_text_primary) !important;
//     color: var(--color_surface_primary) !important;
//     cursor: pointer !important;
//     border-radius: $q;
// }

// .portal_form {
//     @include col--24;
//     @include grid--size--col(24);

//     input {
//         // display: none;
//         // @include col--6;
//     }

//     fieldset,
//     .form_fieldset {
//         @include col--24;
//         display: contents;

//         legend,
//         .form_legend {
//             display: none;
//         }

//         .form_fields {
//             display: grid;
//             @include col--24;
//             @include grid--size--col(24);

//             .form_fields_nested {
//                 @include col--24;
//                 @include grid--size--col(24);

//                 .form_fields_nested {
//                     grid-column-start: 7;
//                     grid-column-end: -1;
//                 }
//             }

//             .form_field_info,
//             .form_fields_nested > .form_field_info,
//             .form_fields_nested > .form_fields_nested > .form_field_info {
//                 @include col--6;
//                 @include flex--col;

//                 .form_field_label,
//                 .form_field_help,
//                 .form_field_errors {
//                 }

//                 label,
//                 .form_field_label {
//                 }

//                 .form_field_help {
//                     @include font--size_03;
//                 }

//                 .form_field_errors {
//                     @include font--size_03;
//                     color: red;
//                 }
//             }

//             .form_field_input,
//             .form_fields_nested > .form_field_input,
//             .form_fields_nested > .form_fields_nested > .form_field_input {
//                 @include col--18;

//                 * {
//                     width: 100%;
//                 }

//                 input,
//                 .form-control {
//                     // @include col--18;
//                     // width: 80%
//                     width: 100%;
//                 }

//                 input[type='checkbox'] {
//                     width: 32 * $q;
//                 }
//             }
//         }

//         .form_line {
//             @include col--24;
//             width: 100%;
//             margin-top: 8 * $q;
//             border-bottom-style: solid;
//             border-bottom-width: $data_table_body_border_width;
//             border-bottom-color: $data_table_body_border_color;
//         }

//         .form_buttons {
//             @include col--24;
//             @include flex--row--reverse;

//             .form_button {
//                 @include portal_button;
//             }
//         }
//     }
// }

// .form_field_info {
//     grid-column: span 24 !important;
// }

// .form_field_input {
//     @include input-field();
// }

// .form-control.form_field {
//     border-bottom: none;
// }

// .form_button {
//     margin-top: q(24);
//     @include action-button();
// }

// /* FORM FIELD FIXES */

// .form_field_wrap {
//     margin-bottom: q(16);
// }

// .form_field_info {
//     margin: q(8) 0;

//     .form_field_label {
//         display: block;
//         margin: 0px;
//     }
// }

// .form_field_input {
//     input {
//         width: 100%;
//     }

//     select {
//         margin: q(8) 0;
//         display: flex;
//         width: 100%;
//         background: none;
//     }
// }

// .form_buttons {
//     margin-top: q(16);

//     button {
//         width: max-content;
//         display: inline-block;
//     }
// }

// .form_fieldset.grid--size--col(24) {
//     display: grid;
//     gap: q(16);
// }

// .form_fields.col--12 {
//     grid-column: span 12 !important;
// }

// /* # =================================================================
//    # Forms
//    # ================================================================= */

//   optgroup {
//     font-weight: bold; /* Restore the font weight unset by the previous rule */
//   }

//   a:focus,
//   button:focus,
//   input:focus,
//   select:focus,
//   textarea:focus {
//     outline-width: 0;
//   }

//   ::-webkit-file-upload-button {
//     /* Correct the inability to style clickable types in iOS and Safari */
//     -webkit-appearance: button;
//     color: inherit;
//     font: inherit; /* Change font properties to `inherit` in Chrome and Safari */
//   }

//   /* Replace pointer cursor in disabled elements */
//   [disabled] {
//     cursor: default;
//   }

// .form_contact{
//     label, input, textarea{
//       @include reset_bleed;
//       display: float;
//       padding-top:            ($q * 1.00);
//       padding-bottom:         ($q * 0.75);
//       border-bottom-width:    ($q * 0.25);
//       border-bottom-style:    solid;
//       border-bottom-color:    var(--color_fill_primary);
//     }
//     label{
//         float: left;
//         height: $baseline;
//         margin-bottom: $baseline;
//         width:25%;
//         min-width:25%;
//     }
//     input{
//         background: transparent;
//         color: var(--color_text_primary);
//         float: right;
//         height: $baseline;
//         width:75%;
//         max-width:75%;
//         margin-bottom: $baseline;
//         background-color: var(--color_text_primary);

//     }
//     textarea{
//         background: transparent;
//         height: calc(10*$baseline);
//         width:100%;
//         margin-bottom: $baseline;
//         background-color: var(--color_fill_primary);
//         opacity: .1;
//     }
// }

// .form-group
// {
//     position: relative;

//     display: block;

//     margin-bottom: 1.875rem;
// }

// .form-row
// {
//     display: grid;

//     grid-gap: 1.875rem;
//     grid-template-columns: repeat(1, 1fr);
// }
// .form-row.two-col
// {
//     grid-template-columns: repeat(2, 1fr);
// }
// @media only screen and (max-width: 76q(8))
// {
//     .form-row.two-col
//     {
//         grid-gap: 0;
//         grid-template-columns: repeat(1, 1fr);
//     }
// }
// .form-row.three-col
// {
//     grid-template-columns: repeat(3, 1fr);
// }
// @media only screen and (max-width: 76q(8))
// {
//     .form-row.three-col
//     {
//         grid-gap: 0;
//         grid-template-columns: repeat(1, 1fr);
//     }
// }

// /// Mixin for general input and textarea reset styles
// /// @group Form
// @mixin form_reset {
//     @include reset_bleed;
//     display: block;
//     padding: ($q * 0.75) 0;
//     border-bottom: ($q * 0.25) solid var(--color_fill_primary);
// }

// /// Example of custom form styling
// /// @group Form
// .form_contact {
//     label, input, textarea {
//         @include form_reset;
//     }
//     label {
//         float: left;
//         height: $baseline;
//         margin-bottom: $baseline;
//         width: 25%;
//         min-width: 25%;
//     }
//     input {
//         background: transparent;
//         color: var(--color_text_primary);
//         float: right;
//         height: $baseline;
//         width: 75%;
//         max-width: 75%;
//         margin-bottom: $baseline;
//         background-color: var(--color_text_primary);
//     }
//     textarea {
//         background: transparent;
//         height: calc(10 * $baseline);
//         width: 100%;
//         margin-bottom: $baseline;
//         background-color: var(--color_fill_primary);
//         opacity: 0.1;
//     }
// }

// /// General styles for various form elements
// /// @group Form
// form {
//     max-width: 100%;
// }

// /// Form group styling
// /// @group Form
// .form-group {
//     position: relative;
//     display: block;
//     margin-bottom: 1.875rem;
// }

// /// Form row styling
// /// @group Form
// .form-row {
//     display: grid;
//     grid-gap: 1.875rem;
//     grid-template-columns: repeat(1, 1fr);
// }

// /// Two-column form row
// /// @group Form
// .form-row.two-col {
//     grid-template-columns: repeat(2, 1fr);
// }

// /// Responsive form row styling for two-column layout
// /// @group Form
// @media only screen and (max-width: 76q(8)) {
//     .form-row.two-col {
//         grid-gap: 0;
//         grid-template-columns: repeat(1, 1fr);
//     }
// }

// /// Three-column form row
// /// @group Form
// .form-row.three-col {
//     grid-template-columns: repeat(3, 1fr);
// }

// /// Responsive form row styling for three-column layout
// /// @group Form
// @media only screen and (max-width: 76q(8)) {
//     .form-row.three-col {
//         grid-gap: 0;
//         grid-template-columns: repeat(1, 1fr);
//     }
// }

// .form_contact{
//     label, input, textarea{
//       @include reset_bleed;
//       display: float;
//       padding-top:            ($q * 1.00);
//       padding-bottom:         ($q * 0.75);
//       border-bottom-width:    ($q * 0.25);
//       border-bottom-style:    solid;
//       border-bottom-color:    var(--color_fill_primary);
//     }
//     label{
//         float: left;
//         height: $baseline;
//         margin-bottom: $baseline;
//         width:25%;
//         min-width:25%;
//     }
//     input{
//         background: transparent;
//         color: var(--color_text_primary);
//         float: right;
//         height: $baseline;
//         width:75%;
//         max-width:75%;
//         margin-bottom: $baseline;
//         background-color: var(--color_text_primary);

//     }
//     textarea{
//         background: transparent;
//         height: calc(10*$baseline);
//         width:100%;
//         margin-bottom: $baseline;
//         background-color: var(--color_fill_primary);
//         opacity: .1;
//     }
// }

// /* FORM / INPUT / TEXTAREA / SELECT
// -------------------------------------------- */
// form
// {
//     max-width: 100%;
// }

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

// .form-group
// {
//     position: relative;

//     display: block;

//     margin-bottom: 1.875rem;
// }

// .form-row
// {
//     display: grid;

//     grid-gap: 1.875rem;
//     grid-template-columns: repeat(1, 1fr);
// }
// .form-row.two-col
// {
//     grid-template-columns: repeat(2, 1fr);
// }
// @media only screen and (max-width: 76q(8))
// {
//     .form-row.two-col
//     {
//         grid-gap: 0;
//         grid-template-columns: repeat(1, 1fr);
//     }
// }
// .form-row.three-col
// {
//     grid-template-columns: repeat(3, 1fr);
// }
// @media only screen and (max-width: 76q(8))
// {
//     .form-row.three-col
//     {
//         grid-gap: 0;
//         grid-template-columns: repeat(1, 1fr);
//     }
// }