// ============================================================================
// Elements | Button
// ============================================================================

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

@use "../../../dev" as *;
@use "../../../variables" as *;
@use "../../soul_type" as *;
@use "../layout/box" as *;
@use "../../soul_object" as *;

// ============================================================================
// Maps
// ============================================================================

///
/// Map of predefined button sizes (width x height in baseline units)
/// @group Buttons
///
$button_size_map: (
    "xs": (
        2,
        "01",
    ),
    "sm": (
        3,
        "02",
    ),
    "md": (
        4,
        "03",
    ),
    "lg": (
        5,
        "04",
    ),
    "xl": (
        6,
        "05",
    ),
) !default;

// ============================================================================
// Resets
// ============================================================================

// Basic reset and styling for button elements only
/// @group Button
@mixin button--reset {
    // Reset: Address `overflow` set to `hidden` in IE 8/9/10/11
    overflow: visible;
    height: auto;

    /// Remove the default button styling in all browsers */
    background-color: transparent;
    border-style: none;

    // Reset:  Firefox 40+, Internet Explorer 11-
    text-transform: none;

    // Specify font inheritance of form elements
    font: inherit;
    -webkit-appearance: button;
    transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);

    // Apply cursor pointer to button elements
    cursor: pointer;

    /// Remove inner padding and border in Firefox 4+
    &::-moz-focus-inner {
        border-style: none;
        padding: 0;
    }

    &:-moz-focusring {
        outline: q(1) dotted ButtonText;
    }
}

// Note: Tag-level styles for button, select, input, textarea have been
// moved to src/scss/tags/_forms.scss

// ============================================================================
// Mixins | Buttons
// ============================================================================

///
/// Mixin for base button reset + styling
/// Core button styles (base visual reset)
/// @group Buttons
///
@mixin button--base {
    @include sizing--border;
    font: inherit;
    border: none;
    cursor: pointer;
    // background: transparent;
    // color: inherit;
    padding: baseline(1);
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    user-select: none;
    transition: all 0.2s ease;
    transition:
        background 0.2s ease,
        border 0.2s ease;
    // border-radius: var(--border_radius, q(4));
    pointer-events: initial;
    cursor: pointer;
}

///
/// Mixin for rectangular button sizing using baseline units
/// (based on baseline box utility)
/// @param {Number} $h - Height in baseline units
/// @group Buttons
///
@mixin button--size($value) {
    $size: baseline($value);
    height: $size;
    min-height: $size;
    max-height: $size;
}

///
/// Full button style preset including base + size
/// @param {Number} $height - Height in baseline units
/// @param {String} $font-size-key - Font-size token key
///
@mixin button($height, $font-size-key) {
    @include button--base;
    @include button--size($height);
    @include font--size($font-size-key);
}
// ==

/// Solid button variant
@mixin button--solid {
    background: var(--color_text_primary);
    color: var(--color_fill_primary);

    &:hover {
        background: var(--color_state_hover);
    }
    &:active {
        background: var(--color_state_active);
    }
    &:focus-within {
        border: q(2) solid var(--color_state_focus);
    }
    &:disabled {
        background: var(--color_state_disabled);
        color: var(--color_text_primary);
        cursor: not-allowed;
    }
}

/// Outline variant
@mixin button--outline {
    border: q(1) solid var(--color_text_primary);
    color: var(--color_text_primary);
    background: none;

    &:hover {
        background: var(--color_state_hover);
    }
    &:active {
        background: var(--color_state_active);
    }
    &:focus-within {
        border: q(2) solid var(--color_state_focus);
    }
    &:disabled {
        border-color: var(--color_state_disabled);
        color: var(--color_state_disabled);
        cursor: not-allowed;
    }
}

/// Outline variant
@mixin button--accent {
    background: var(--color_accent_primary);
    color: var(--color_fill_primary);

    &:hover {
        background: var(--color_accent_primary);
    }
    &:active {
        background: var(--color_accent_primary);
    }
    &:focus-within {
        border: q(2) solid var(--color_accent_primary);
    }
    &:disabled {
        background: var(--color_accent_primary--25);
        color: var(--color_state_disabled);
        cursor: not-allowed;
    }
}

/// Secondary accent variant (uses accent_secondary color)
/// @group Buttons
@mixin button--accent-secondary {
    background: var(--color_accent_secondary);
    color: var(--color_fill_primary);

    &:hover {
        background: var(--color_accent_secondary);
    }
    &:active {
        background: var(--color_accent_secondary);
    }
    &:focus-within {
        border: q(2) solid var(--color_accent_secondary);
    }
    &:disabled {
        background: var(--color_accent_secondary--25);
        color: var(--color_state_disabled);
        cursor: not-allowed;
    }
}

/// Clear/ghost button
@mixin button--clear {
    background: none;
    color: var(--color_text_primary);

    &:hover {
        background: var(--color_state_hover);
    }
    &:active {
        background: var(--color_state_active);
    }
    &:focus-within {
        border: q(2) solid var(--color_state_focus);
    }
    &:disabled {
        color: var(--color_state_disabled);
        cursor: not-allowed;
    }
}

// ============================================================================
// Button Variant Mixins
// ============================================================================

/// Primary button variant
/// @group Buttons
@mixin button--primary {
    background-color: var(--color_accent_primary);
    color: var(--color_fill_primary);
    border-color: var(--color_accent_primary);

    &:hover {
        background-color: var(--color_state_hover);
        border-color: var(--color_state_hover);
    }

    &:active {
        background-color: var(--color_state_active);
        border-color: var(--color_state_active);
    }
}

/// Secondary button variant
/// @group Buttons
@mixin button--secondary {
    background-color: var(--color_fill_secondary);
    color: var(--color_text_primary);
    border-color: var(--color_line_primary);

    &:hover {
        background-color: var(--color_state_hover);
    }

    &:active {
        background-color: var(--color_state_active);
    }
}

/// Ghost button variant (no border)
/// @group Buttons
@mixin button--ghost {
    background-color: transparent;
    color: var(--color_text_primary);
    border-color: transparent;

    &:hover {
        background-color: var(--color_fill_secondary);
    }
}

/// Link-style button variant
/// @group Buttons
@mixin button--link {
    background-color: transparent;
    color: var(--color_state_link);
    border-color: transparent;
    padding: 0;
    text-decoration: underline;

    &:hover {
        color: var(--color_state_hover);
    }
}

// ============================================================================
// Button Status Mixins
// ============================================================================

/// Success button variant
/// @group Buttons
@mixin button--success {
    background-color: var(--color_log_success);
    color: var(--color_fill_primary);
    border-color: var(--color_log_success);
}

/// Warning button variant
/// @group Buttons
@mixin button--warning {
    background-color: var(--color_log_warning);
    color: var(--color_fill_primary);
    border-color: var(--color_log_warning);
}

/// Danger/Error button variant
/// @group Buttons
@mixin button--danger {
    background-color: var(--color_log_error);
    color: var(--color_fill_primary);
    border-color: var(--color_log_error);
}

/// Info button variant
/// @group Buttons
@mixin button--info {
    background-color: var(--color_log_info);
    color: var(--color_fill_primary);
    border-color: var(--color_log_info);
}

// ============================================================================
// Button Size Mixins
// ============================================================================

/// Extra small button size
/// @group Buttons
@mixin button--size-xs {
    padding: q(4) q(8);
    font-size: q(12);
}

/// Small button size
/// @group Buttons
@mixin button--size-sm {
    padding: q(6) q(12);
    font-size: q(13);
}

/// Medium button size (default)
/// @group Buttons
@mixin button--size-md {
    padding: q(8) q(16);
    font-size: q(14);
}

/// Large button size
/// @group Buttons
@mixin button--size-lg {
    padding: q(12) q(24);
    font-size: q(16);
}

/// Extra large button size
/// @group Buttons
@mixin button--size-xl {
    padding: q(16) q(32);
    font-size: q(18);
}

// ============================================================================
// Button Shape Mixins
// ============================================================================

/// Rounded button shape
/// @group Buttons
@mixin button--rounded {
    border-radius: var(--primitive-corner-radius-12, q(12));
}

/// Pill button shape
/// @group Buttons
@mixin button--pill {
    border-radius: 9999px;
}

/// Square button shape (no radius)
/// @group Buttons
@mixin button--square {
    border-radius: 0;
}

/// Icon button (square aspect)
/// @group Buttons
@mixin button--icon {
    padding: q(8);
    aspect-ratio: 1;
}

// ============================================================================
// Button State Mixins
// ============================================================================

/// Disabled button state
/// @group Buttons
@mixin button--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/// Focus visible button state
/// @group Buttons
@mixin button--focus-visible {
    outline: q(2) solid var(--color_focus);
    outline-offset: q(2);
}

/// Full-width/block button
/// @group Buttons
@mixin button--block {
    display: flex;
    width: 100%;
}

/// Loading button state
/// @group Buttons
@mixin button--loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;

    &::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: q(4);
        height: q(4);
        margin-top: q(-2);
        margin-left: q(-2);
        border: q(0.5) solid var(--color_text_primary);
        border-top-color: transparent;
        border-radius: 50%;
        animation: button-spin 0.6s linear infinite;
    }
}

/// Button spin animation keyframes - must be included once globally
/// @group Buttons
@mixin button--spin-keyframes {
    @at-root {
        @keyframes button-spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
    }
}