////
/// @group controls.button
////

@use '../utils' as *;
@use '../site' as *;
@use './base.scss' as *;
@use './helpers.scss' as *;

// -----------------------------------------------------------------------------
// Base mixin for buttons (sets common button properties)

@function button-base() {
    // base config
    $css: control-base();

    // local config
    $locals: (
        justify-content: center,
        overflow: hidden,
        text-overflow: ellipsis,
        user-select: none,
    );
    $css: flat-merge($css, $locals);

    // button config
    $css: flat-merge($css, get('controls:button'));

    @return $css;
}

// -----------------------------------------------------------------------------
/// Creates a basic button style based on site settings with optional overrides
///
/// @base button-base
///
/// @param {options} $overrides - Optional overrides
///
/// @example
///     @include button((accent: clr(green))
///

@mixin button($overrides: ()) {
    $css: button-base();

    // foreground (if not set)
    $accent: flat-get($css, '-px-accent');
    $css: flat-default($css, 'color', contrast-color($accent));

    // overrides
    $css: flat-merge($css, $overrides);

    // accent shades
    $css: shade-props(
        $css,
        ('hover:-px-accent', 'disabled:-px-accent', 'active:-px-accent'),
        $accent
    );

    // add transitions
    @include transition(background-color color box-shadow, flat-get($css, '-px-transition'));

    // add focus selector
    @include control-focus(flat-get($css, '-px-focus-style'));

    // output the css
    @include css-map(
        $css,
        (
            '-px-accent': 'background-color',
            '-px-radius': 'border-radius',
            '-px-shadow': 'box-shadow',
        ),
        $map-states: (hover active disabled)
    );
}

// -----------------------------------------------------------------------------
/// Creates an outline button style based on site settings with optional overrides
///
/// @param {map} $overrides Optional overrides
///
/// @example
///     @include button-outline((accent: clr(green))

@mixin button-outline($overrides: ()) {
    $css: button-base();

    // button-outline config
    $css: flat-merge(
        $css,
        (
            'disabled:background': transparent,
        ),
        get('controls:button-outline')
    );

    // overrides
    $css: flat-merge($css, $overrides);

    // accent shades
    $accent: flat-get($css, '-px-accent');
    $css: shade-props(
        $css,
        ('hover:-px-accent', 'disabled:-px-accent', 'active:-px-accent'),
        $accent
    );

    // foreground color (if not set)
    $css: flat-default($css, 'color', $accent);

    // hover/active backgrounds (if not set)
    $css: flat-default($css, 'hover:background-color', rgba($accent, 0.05));
    $css: flat-default($css, 'active:background-color', rgba($accent, 0.15));

    // add focus selector
    @include control-focus(flat-get($css, '-px-focus-style'));

    // add transitions
    @include transition(border-color background-color, flat-get($css, '-px-transition'));

    // output the css
    @include css-map(
        $css,
        (
            '-px-accent': (
                'border-color',
                'color',
            ),
            '-px-radius': 'border-radius',
        ),
        $map-states: (hover active disabled)
    );
}

// -----------------------------------------------------------------------------
/// Creates a simple text-only button style based on site settings with optional overrides
///
/// @param {map} $overrides Optional overrides
///
/// @example
///     @include button-text()

@mixin button-text($overrides: ()) {
    $css: button-base();

    // button-outline config
    $css: flat-merge(
        $css,
        (
            'disabled:transform': none,
        ),
        get('controls:button-text')
    );

    // overrides
    $css: flat-merge($css, $overrides);

    // accent shades
    $accent: flat-get($css, '-px-accent');
    $css: shade-props(
        $css,
        ('hover:-px-accent', 'disabled:-px-accent', 'active:-px-accent'),
        $accent
    );

    // add transitions
    @include transition(color transform, flat-get($css, '-px-transition'));

    // add focus selector
    @include control-focus(flat-get($css, '-px-focus-style'));

    // output the css
    @include css-map(
        $css,
        (
            '-px-accent': 'color',
            '-px-radius': 'border-radius',
        ),
        $map-states: (hover active disabled)
    );
}