@use "sass:map";

//
@use "./layout" as layout;
@use "./typography" as text;
@use "./color" as color;
@use "./colorize" as colorize;
@use "./motion" as motion;
@use "./utils" as utils;
@use "./shared-overlays" as overlays;



// -----------------------------------------------------------------------------
// Shared base styles
// -----------------------------------------------------------------------------

@mixin button-structure() {
    display: inline-flex;

    //
    place-items: center;
    place-content: center;

    //
    gap: var(--button-gap, var(--gap-sm));

    //
    padding-block: var(--button-padding-y, var(--padding-sm));
    padding-inline: var(--button-padding-x, var(--padding-lg));
    min-block-size: var(--button-min-height, fit-content);
    border-radius: var(--button-radius, var(--radius-full));

    // Cursor and transition
    cursor: pointer;
    transition:
        var(--transition-transform, transform var(--duration-fast) var(--ease-out)),
        var(--transition-colors, color var(--duration-normal) var(--ease-out), background-color var(--duration-normal) var(--ease-out)),
        var(--transition-opacity, opacity var(--duration-normal) var(--ease-out));

    //
    pointer-events: auto;
    border: none;
    outline: none;

    //
    position: relative;
    font-size: text.md3-type("label-large", size);

    //
    letter-spacing: 0.01em;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    user-select: none;

    //
    min-inline-size: 0px;
    block-size: fit-content;
    inline-size: fit-content;
    max-block-size: stretch;
    max-inline-size: stretch;
    flex-wrap: nowrap;

    //
    &:disabled {
        opacity: var(--state-opacity-disabled, 0.38);
        pointer-events: none;
    }

    //
    & > * { max-inline-size: stretch; }

    //
    & :where(span, a) {
        display: inline;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        flex-wrap: nowrap;
    }

    //
    &:is(input) {
        display: inline-block;
    }
}

//
@mixin button-overlays($fallback-color) {
    --md-button-state-color: var(--md-button-state-color, #{$fallback-color});

    @include overlays.state-overlay(var(--md-button-state-color, #{$fallback-color}));
}

@mixin button-focus-ring() {
    @include overlays.focus-ring(var(--md-button-state-color, var(--md-primary)));
}

@mixin button-icon($size: var(--icon-size-lg)) {
    @include overlays.icon-button($size);
}




// -----------------------------------------------------------------------------
// Unified variant mixin
// -----------------------------------------------------------------------------

@mixin button-variant(
    $variant: filled,
    $role: primary,
    $container-role: secondary-container,
    $state-role: secondary,
    $include-base: true
) {
    @include colorize.solid-colorize("&", ("shade": 0.05, "tint": 0.0, "scope": "selector", "global-targets": true));
    @if $include-base { @include button-structure; }

    // Compute the CSS variable to use for state overlays
    $state-var: if(sass($variant == tonal): color.md3-var($state-role); else: color.md3-var($role));

    // Common CSS variable setup
    --md-button-bg: color-mix(in oklch, var(--color-surface, var(--surface-color, transparent)) 90%, var(--color-on-surface, var(--on-surface-color, transparent)));
    --md-button-on: var(--color-on-surface, var(--on-surface-color, currentColor));
    --md-button-outline-color: var(--border-color, transparent);

    // Variant-specific styles
    @if $variant == outlined {
        background-color: transparent;
        color: var(--md-button-on, var(--on-surface-color, currentColor));
        border: 1px solid var(--md-button-outline-color, var(#{color.md3-var(outline)}));
    } @else if $variant == text {
        background-color: transparent;
        color: var(--md-button-on, var(--on-surface-color, currentColor));
        border: none;
    } @else {
        // filled, elevated, tonal
        background-color: var(--color-surface, var(--surface-color, transparent));
        color: var(--md-button-on, var(--color-on-surface, currentColor));
        border: none;
    }

    // Apply state overlays and focus ring
    @include button-overlays(var(#{$state-var}));
    @include button-focus-ring;
}


// -----------------------------------------------------------------------------
// Variant mixins (backward compatibility wrappers)
// -----------------------------------------------------------------------------

@mixin button-filled($role: primary, $include-base: true) {
    @include button-variant(filled, $role, $include-base: $include-base);
}

@mixin button-elevated($role: primary, $include-base: true) {
    @include button-variant(elevated, $role, $include-base: $include-base);
}

@mixin button-tonal($container-role: secondary-container, $state-role: secondary, $include-base: true) {
    @include button-variant(tonal, $state-role, $container-role, $state-role, $include-base: $include-base);
}

@mixin button-outlined($role: primary, $include-base: true) {
    @include button-variant(outlined, $role, $include-base: $include-base);
}

@mixin button-text($role: primary, $include-base: true) {
    @include button-variant(text, $role, $include-base: $include-base);
}





// -----------------------------------------------------------------------------
// Button base mixins
// -----------------------------------------------------------------------------


@mixin button-base {
    @include button-structure;
    @include button-filled;
}

//
@mixin button-interactions($transition: var(--transition-base, var(--duration-normal))) {
    @include motion.transition(all, $transition);
}

//
@mixin button-colors() {
    @include button-structure;
    @include button-filled;
}

//
@mixin button-base-variant() {
    // Reuse unified structure with alternate sizing tokens
    @include button-structure;
    @include button-interactions;
    @include button-colors;
}

//
@mixin toolbar-button {
    font-size: var(--font-size-sm);

    //
    @include layout.container-query("md") { span { display: none; } }
}