////
///
/// Form Validation Mixins (Abide-style)
/// ===========================================================================
///
/// Foundation Abide-style form validation mixins for displaying validation
/// states, error messages, and visual feedback on form inputs.
///
/// @group Mixins.BodyMolecules.Forms
/// @author Scape Agency
/// @link https://scape.style
/// @since 0.1.0 initial release
/// @access public
///
////

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

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

// ============================================================================
// Form Error Message Mixins
// ============================================================================

/// Form error message base styling (hidden by default)
/// @group Forms.Validation
@mixin validation-error {
    display: none;
    margin-top: q(4);
    margin-bottom: q(8);
    font-size: q(12);
    font-weight: 500;
    color: var(--color_log_error);
    line-height: 1.4;
}

/// Visible error state
/// @group Forms.Validation
@mixin validation-error--visible {
    display: block;
}

/// Form success message styling
/// @group Forms.Validation
@mixin validation-success {
    display: none;
    margin-top: q(4);
    margin-bottom: q(8);
    font-size: q(12);
    font-weight: 500;
    color: var(--color_log_success);
    line-height: 1.4;
}

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

/// Invalid input state
/// @group Forms.Validation
@mixin validation-input--invalid {
    border-color: var(--color_log_error);

    &:focus {
        border-color: var(--color_log_error);
        box-shadow: 0 0 0 q(3) rgba(220, 53, 69, 0.15);
        outline: none;
    }
}

/// Valid input state
/// @group Forms.Validation
@mixin validation-input--valid {
    border-color: var(--color_log_success);

    &:focus {
        border-color: var(--color_log_success);
        box-shadow: 0 0 0 q(3) rgba(40, 167, 69, 0.15);
        outline: none;
    }
}

/// Warning input state
/// @group Forms.Validation
@mixin validation-input--warning {
    border-color: var(--color_log_warning);

    &:focus {
        border-color: var(--color_log_warning);
        box-shadow: 0 0 0 q(3) rgba(255, 193, 7, 0.15);
        outline: none;
    }
}

// ============================================================================
// Validated Form Field Container
// ============================================================================

/// Form field with validation support
/// @group Forms.Validation
@mixin form-field--validated {
    position: relative;

    .form-error,
    .input__error {
        @include validation-error;
    }

    .form-success,
    .input__success {
        @include validation-success;
    }

    &.is-invalid,
    &.is_error {
        input,
        textarea,
        select {
            @include validation-input--invalid;
        }

        .form-error,
        .input__error {
            @include validation-error--visible;
        }

        label {
            color: var(--color_log_error);
        }
    }

    &.is-valid,
    &.is_success {
        input,
        textarea,
        select {
            @include validation-input--valid;
        }

        .form-success,
        .input__success {
            display: block;
        }
    }

    &.is-warning,
    &.is_warning {
        input,
        textarea,
        select {
            @include validation-input--warning;
        }
    }
}

// ============================================================================
// Validation Icon Indicators
// ============================================================================

/// Form field with validation icons
/// @group Forms.Validation
@mixin form-field--with-icon {
    position: relative;

    input,
    textarea,
    select {
        padding-right: q(40);
    }

    &::after {
        content: "";
        position: absolute;
        right: q(12);
        top: q(38);
        width: q(20);
        height: q(20);
        opacity: 0;
        transition: opacity 0.2s ease;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    &.is-valid::after,
    &.is_success::after {
        opacity: 1;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2328a745'%3e%3cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3e%3c/svg%3e");
    }

    &.is-invalid::after,
    &.is_error::after {
        opacity: 1;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23dc3545'%3e%3cpath fill-rule='evenodd' d='M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z' clip-rule='evenodd'/%3e%3c/svg%3e");
    }
}

// ============================================================================
// CSS-based Native Validation
// ============================================================================

/// CSS-based validation for HTML5 constraint validation
/// @group Forms.Validation
@mixin form-field--native-validation {
    input,
    textarea,
    select {
        &:user-invalid,
        &:not(:placeholder-shown):invalid {
            @include validation-input--invalid;
        }

        &:user-valid,
        &:not(:placeholder-shown):valid {
            @include validation-input--valid;
        }
    }
}

// ============================================================================
// Form-level Validation
// ============================================================================

/// Form with validation enabled
/// @group Forms.Validation
@mixin form--validated {
    &.was-validated {
        input:invalid,
        textarea:invalid,
        select:invalid {
            @include validation-input--invalid;
        }

        input:valid,
        textarea:valid,
        select:valid {
            @include validation-input--valid;
        }

        .form-field.is-invalid .form-error {
            @include validation-error--visible;
        }
    }

    &:not(.was-validated) {
        .form-error {
            display: none !important;
        }
    }
}

// ============================================================================
// Required Field Indicators
// ============================================================================

/// Required field asterisk
/// @group Forms.Validation
@mixin label--required {
    &::after {
        content: " *";
        color: var(--color_log_error);
        font-weight: 700;
    }
}

/// Optional field indicator
/// @group Forms.Validation
@mixin label--optional {
    &::after {
        content: " (optional)";
        color: var(--color_text_tertiary);
        font-size: calc(var(--typescale-base) * 0.875);
        font-weight: 400;
    }
}