// Update: 20261001
//---------------------
@use "sass:color";
@use "sass:map";
@use "../base" as *;
@use "../vendor" as *;

$btn_default: (
    width: 150px,
    height: 47px,
    aspect_ratio: null,
    bg: #FFF,
    bg_hover: #000,
    bg_active: #000,
    bg_disabled: color.adjust(#000, $lightness: 70%),
    color: #000,
    color_hover: #FFF,
    color_active: #FFF,
    color_disabled: color.adjust(#000, $lightness: 40%),
    border_radius: 0px,
    border: 1px solid #000,
    border_hover: 1px solid #000,
    border_disabled: 1px solid color.adjust(#000, $lightness: 70%),
    padding: 10px,
    time: 500ms,
    tf: (),
    display: flex,
    cursor: pointer,
    cursor_disabled: not-allowed,
    reset: true
);

@mixin button_simple($attr: ()) {
    $w: mapv($attr, (width, w), map.get($btn_default, width));
    $h: mapv($attr, (height, h), map.get($btn_default, height));
    $ar: mapv($attr, (aspect_ratio, ratio, ar), map.get($btn_default, aspect_ratio));
    $bg: mapv($attr, bg, map.get($btn_default, bg));
    $bgh: mapv($attr, (bg_hover, bgh), map.get($btn_default, bg_hover));
    $bga: mapv($attr, (bg_active, bga), map.get($btn_default, bg_active));
    $bgd: mapv($attr, (bg_disabled, bgd), map.get($btn_default, bg_disabled));
    $color: mapv($attr, (color, c), map.get($btn_default, color));
    $colorh: mapv($attr, (color_hover, ch), map.get($btn_default, color_hover));
    $colora: mapv($attr, (color_active, ca), map.get($btn_default, color_active));
    $colord: mapv($attr, (color_disabled, cd), map.get($btn_default, color_disabled));
    $radius: mapv($attr, (border_radius, radius), map.get($btn_default, border_radius));
    $bd: mapv($attr, (border, bd), map.get($btn_default, border));
    $bdh: mapv($attr, (border_hover, bdh), map.get($btn_default, border_hover));
    $bda: mapv($attr, (border_active, bda), 1px solid #000);
    $bdd: mapv($attr, (border_disabled, bdd), map.get($btn_default, border_disabled));
    $time: mapv($attr, (time, t), map.get($btn_default, time));
    $tf_attr: mapv($attr, tf, map.get($btn_default, tf));
    $cursor: mapv($attr, (cursor, cur), map.get($btn_default, cursor));
    $cursord: mapv($attr, (cursor_disabled, curd), map.get($btn_default, cursor_disabled));
    $reset: mapv($attr, (reset, r), map.get($btn_default, reset));
    $padding: mapv($attr, (padding, p), map.get($btn_default, padding));

    @if $reset { all: initial; }

    @if $ar != null { $h: null }
    @include resolve-size(( w: $w, h: $h, r: $ar));


    @include transition(all $time);
    @include center-flex-column;
    @include border-radius($radius);
    @include user-select;
    @include tf($tf_attr);
    @include bc($bg, $color);
    box-sizing: border-box;
    padding: $padding;
    cursor: $cursor;
    border: $bd;

    &:hover {
        @include transition(all $time);
        @include bc($bgh, $colorh);
        border: $bdh;
    }

    &:disabled,
    &.disabled {
        @include transition(all $time);
        @include bc($bgd, $colord);
        cursor: $cursord;
        border: $bdd;
    }

    &.active {
        @include transition(all $time);
        @include bc($bga, $colora);
        border: $bda;
    }
}

@mixin button_style_arrow_icon($icon, $transition, $right: 10px, $left: -10px) {
    @if $icon == right {
        &::after {
            @include transition($transition);
            @include position(relative, -2px, $right);
        }
    }

    @if $icon == left {
        &::before {
            @include transition($transition);
            @include position(relative, -2px, $left);
        }
    }
}

@mixin button_style_arrow($attr: ()) {
    $position_attr: mapv($attr, (position, p), ());
    $w: mapv($attr, (width, w), map.get($btn_default, width));
    $h: mapv($attr, (height, h), map.get($btn_default, height));
    $ar: mapv($attr, (aspect_ratio, ratio, ar), map.get($btn_default, aspect_ratio));
    $bg: mapv($attr, bg, map.get($btn_default, bg));
    $bgh: mapv($attr, (bg_hover, bgh), map.get($btn_default, bg_hover));
    $bga: mapv($attr, (bg_active, bga), map.get($btn_default, bg_active));
    $bgd: mapv($attr, (bg_disabled, bgd), map.get($btn_default, bg_disabled));
    $color: mapv($attr, (color, c), map.get($btn_default, color));
    $colorh: mapv($attr, (color_hover, ch), map.get($btn_default, color_hover));
    $colora: mapv($attr, (color_active, ca), map.get($btn_default, color_active));
    $colord: mapv($attr, (color_disabled, cd), map.get($btn_default, color_disabled));
    $radius: mapv($attr, (border_radius, radius), map.get($btn_default, border_radius));
    $bd: mapv($attr, (border, bd), map.get($btn_default, border));
    $bdh: mapv($attr, (border_hover, bdh), map.get($btn_default, border_hover));
    $bda: mapv($attr, (border_active, bda), 1px solid #000);
    $bdd: mapv($attr, (border_disabled, bdd), map.get($btn_default, border_disabled));
    $time: mapv($attr, (time, t), map.get($btn_default, time));
    $tf_attr: mapv($attr, tf, map.get($btn_default, tf));
    $icon: mapv($attr, (icon, i), right);
    $cursor: mapv($attr, (cursor, cur), map.get($btn_default, cursor));
    $cursord: mapv($attr, (cursor_disabled, curd), map.get($btn_default, cursor_disabled));
    $reset: mapv($attr, (reset, r), map.get($btn_default, reset));
    $display: mapv($attr, (display, d), map.get($btn_default, display));
    $padding: mapv($attr, (padding, pa), map.get($btn_default, padding));

    @if $reset { all: initial; }

    @if $ar != null { $h: null }
    @include resolve-size(( w: $w, h: $h, r: $ar));

    @include border-radius($radius);
    @include position($position_attr);
    @include user-select;
    @include bc($bg, $color);
    box-sizing: border-box;
    display: $display;
    cursor: $cursor;

    &:before {
        @include border-radius($radius);
        @include transition(all $time);
        @include position((p: absolute, x: -1px, y: -1px, z: 0));
        @include whs(100%);
        background-color: transparent;
        border: $bd;
        content: "";
    }

    &:hover:not(:disabled):not(.disabled):not(.active) {
        $xdirection: if(sass($icon == right): 4px; else: -4px);

        &:before {
            @include transition(all $time);
            @include position((p: absolute, x: $xdirection, y: 4px, z: 0));
            border: $bdh;
        }

        .content_link {
            @include transition(all $time);
            @include bc($bgh, $colorh);

            @include button_style_arrow_icon($icon, all $time, 15px, -15px);
        }
    }

    &:disabled,
    &.disabled {
        cursor: $cursord;
        border: $bdd;

        &:before {
            @include transition(none);
            @include position((p: absolute, x: -1px, y: -1px, z: 0));
            border: $bdd;
        }

        .content_link {
            @include bc($bgd, $colord);
            border:  $bdd;

            @include button_style_arrow_icon($icon, none);
        }
    }

    &.active {
        &:before {
            @include transition(none);
            @include position((p: absolute, x: -1px, y: -1px, z: 0));
            @include border-radius($radius);
            border: $bda;
        }

        .content_link {
            @include transition(all $time);
            @include bc($bga, $colora);
            @include button_style_arrow_icon($icon, none);
        }
    }

    .content_link {
        @include border-radius($radius);
        @include transition(all $time);
        @include center-flex-row;
        @include tf($tf_attr);
        @include whs(100%);
        @include bc($bg, $color);
        @include position;
        box-sizing: border-box;
        padding: $padding;

        @if $icon == right {
            padding-right: 5px;

            &:after {
                @include position(relative, -2px, 10px);
                @include transition(all $time);
                content: "\2192";
            }
        }

        @if $icon == left {
            padding-left: 5px;

            &:before {
                @include position(relative, -2px, -10px);
                @include transition(all $time);
                content: "\2190";
            }
        }
    }
}

@mixin button_bisel($attr: ()) {
    $w: mapv($attr, (width, w), map.get($btn_default, width));
    $h: mapv($attr, (height, h), map.get($btn_default, height));
    $difi: mapv($attr, (diff, dif), 10px);
    $bg1: mapv($attr, bg1, #FFF);
    $bg2: mapv($attr, bg2, #000);
    $bgo: mapv($attr, (bg_opacity, bgo), 0.4);
    $bdc: mapv($attr, (border_contain, bdc), false);
    $bd: mapv($attr, (border, bd), map.get($btn_default, border));
    $cursor: mapv($attr, (cursor, cur), map.get($btn_default, cursor));
    $asi: mapv($attr, (aspect_inside, inside, i), 3.7);
    $tf_attr: mapv($attr, tf, map.get($btn_default, tf));
    $ob: mapv($attr, opacity_before, 1);
    $color: mapv($attr, (color, c), map.get($btn_default, color));
    $colorh: mapv($attr, (color_hover, ch), map.get($btn_default, color_hover));

    all: initial;
    @include wh($w, $h);
    @include user-select;
    @include position;
    @include align-items(center);
    @include flex;
    background: linear-gradient(to top, rgba($bg1, $bgo), rgba($bg2, $bgo));
    cursor: $cursor;

    @if $bdc {
        border: $bd;
    }

    &:hover {
        &:before {
            background: linear-gradient(to top, rgba($bg1, $bgo), rgba($bg2, $bgo));
        }

        .content_link { color: $colorh; }
    }

    &:before {
        @include center-absolute;
        width: calc($w - $difi);
        aspect-ratio:  $asi;
        opacity: $ob;
        background: linear-gradient(to bottom, rgba($bg1, $bgo), rgba($bg2, $bgo));
        z-index: 0;
        content: "";
    }

    .content_link {
        @include center-flex-column;
        @include tf($tf_attr);
        color: $color;
        width: 95%;
        z-index: 2;
    }
}