// Update: 20220502

//---------------------
@mixin button_simple($attr: ()) {
    $bg: mapv($attr, bg, $c1);
    $bgh: mapv($attr, bg_hover, $c2);
    $color: mapv($attr, color, $c2);
    $colorh: mapv($attr, color_hover, $c1);
    $size: mapv($attr, size, 18);
    $font: mapv($attr, font, $f1);
    $weight: mapv($attr, weight, normal);
    $align: mapv($attr, align, center);
    $uppercase: mapv($attr, uppercase, uppercase);
    $w: mapv($attr, width, 65px);
    $h: mapv($attr, height, 45px);
    $bd: mapv($attr, border_color, $c2);
    $bdh: mapv($attr, border_color_hover, $c2);
    $bdsize: mapv($attr, border_size, 1px);
    $bdstyle: mapv($attr, border_style, solid);
    $time: mapv($attr, time, $t5);

    all: initial;
    @include font(szrem($size), $font, $weight);
    @include transition(all $time);
    @include text($align, $uppercase);
    @include center-flex-column;
    @include user-select;
    @include wh($w, $h);
    border: $bdsize $bdstyle $bd;
    background-color: $bg;
    cursor: pointer;
    color: $color;

    &:hover,
    &.active
    {
        @include transition(all $time);
        border: $bdsize $bdstyle $bdh;
        background-color: $bgh;
        color: $colorh;
    }
}

@mixin button_style_adidas_1($attr: ()) {
    $w: mapv($attr, width, 280px);
    $ar: mapv($attr, aspect_ratio, 5.16);
    $bg: mapv($attr, bg, $c2);
    $bgh: mapv($attr, bg_hover, $c2);
    $bgd: mapv($attr, bg_disabled, lighten($c2, 80%));
    $color: mapv($attr, color, $c1);
    $colorh: mapv($attr, color_hover, $c1);
    $colord: mapv($attr, color_disabled, lighten($c2, 40%));
    $font: mapv($attr, font, $f1);
    $size: mapv($attr, size, 18);
    $weight: mapv($attr, weight, bold);
    $transform: mapv($attr, transform, uppercase);
    $align: mapv($attr, align, center);
    $time: mapv($attr, time, $t2);
    $bd: mapv($attr, border_color, $c2);
    $bdh: mapv($attr, border_color_hover, $c2);
    $bdd: mapv($attr, border_color_disabled, lighten($c2, 80%));
    $bdsize: mapv($attr, border_size, 1px);
    $bdstyle: mapv($attr, border_style, solid);
    $iconr: mapv($attr, icon_right, false);
    $iconl: mapv($attr, icon_left, false);

    @include position;
    @include aspect-ratio($w, $ar);
    @include user-select;
    display: block;
    cursor: pointer;

    &:before {
        @include transition(all $t2 linear);
        @include position(absolute);
        @include wh(99%, 97%);
        border: $bdsize $bdstyle $bd;
        background-color: $c0;
        content: "";
        z-index: 0;
    }

    &:hover {
        &:before {
            @include transition(all $t2 linear);
            @include position(absolute, 4px, 4px);
            border: $bdsize $bdstyle $bdh;
        }

        .content_link {
            @include transition(all $t2 linear);
            background-color: $bgh;
            color: $colorh;

            @if $iconr {
                &:after {
                    @include position(relative, -2px, 15px);
                    @include transition(all $t2 linear);
                }
            }

            @if $iconl {
                &:before {
                    @include position(relative, -2px, -15px);
                    @include transition(all $t2 linear);
                }
            }
        }
    }

    &:disabled,
    &.disabled {
        cursor: not-allowed;

        &:hover {
            &:before {
                @include position(absolute);
            }
        }

        &:before {
            border: $bdsize $bdstyle $bdd;
        }

        .content_link {
            border: $bdsize $bdstyle $bdd;
            background-color: $bgd;
            color: $colord;
        }

    }

    .content_link {
        @include position;
        @include center-flex-row;
        @include aspect-ratio($w, $ar);
        @include font(szrem($size), $font, $weight);
        @include text($align, $transform);
        @include transition(all $t2 linear);
        border: $bdsize $bdstyle $bd;
        background-color: $bg;
        color: $color;
        z-index: 0;

        @if $iconr {
            padding-right: 5px;

            &:after {
                @include position(relative, -2px, 10px);
                @include transition(all $t2 linear);
                font-size: szrem($size - 3);
                content: "\2192";
            }
        }

        @if $iconl {
            padding-left: 5px;

            &:before {
                @include position(relative, -2px, -10px);
                @include transition(all $t2 linear);
                font-size: szrem($size - 3);
                content: "\2190";
            }
        }
    }
}

@mixin button_bisel($attr: ()) {
    $w: mapv($attr, width, 140px);
    $h: mapv($attr, height, 55px);
    $difi: mapv($attr, diff, 10px);
    $bg1: mapv($attr, bg1, $c1);
    $bg2: mapv($attr, bg2, $c2);
    $bgo: mapv($attr, bg_opacity, 0.4);
    $bdb: mapv($attr, border_contain, false);
    $bd: mapv($attr, border, 2px solid $c2);
    $aspi: mapv($attr, aspect_inside, 2.8);
    $font: mapv($attr, font, $f1);
    $size: mapv($attr, size, 18);
    $weight: mapv($attr, weight, bold);
    $ob: mapv($attr, opacity_before, 1);
    $color: mapv($attr, color, $c1);
    $colorh: mapv($attr, color_hover, $c1);

    all: initial;
    @include wh($w, $h);
    @include user-select;
    @include position;
    background: linear-gradient(to top, rgba($bg1, $bgo), rgba($bg2, $bgo));
    cursor: pointer;
    display: block;

    @if $bdb {
        border: $bd;
    }

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

        .content_link { color: $colorh; }
    }

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

    .content_link {
        @include font(szrem($size), $font, $weight);
        @include text(center, uppercase);
        @include hv-center;
        color: $color;
        width: 95%;
        z-index: 2;
    }
}