//-----------------------------------
//Mixin
//-----------------------------------
@mixin normalize-svg($attr: ()) {
    $width: mapv($attr, width, auto);
    $height: mapv($attr, height, auto);
    $position: mapv($attr, position, relative);
    $x: mapv($attr, x, 0);
    $y: mapv($attr, y, 0);
    $yaxis: mapv($attr, yaxis, top);
    $xaxis: mapv($attr, xaxis, left);
    $z: mapv($attr, z, 2);
    $ar: mapv($attr, aspect-ratio, false);

    @include ht;

    @if $ar {
        @if $width != auto {
            width: $width;
        }
        @if $height != auto {
            height: $height;
        }
        aspect-ratio: $ar;
    }

    @else {
        @include wh($width, $height);
    }

    @include position(
        $position,
        $y, $x,
        $yaxis, $xaxis
    );
    z-index: $z;
}

@mixin t1($attr: ()) {
    $size: mapv($attr, size, clamp(szrem(18), 1.25vw, szrem(24)));
    $font: mapv($attr, font, $f1);
    $weight: mapv($attr, weight, 400);
    $align: mapv($attr, align, center);
    $transform: mapv($attr, transform, initial);
    $decoration: mapv($attr, decoration, initial);

    @include font($size, $font, $weight);
    @include text($align, $transform, $decoration);
}

@mixin t2 {
    @include t1((
        size: clamp(szrem(45), 2.86vw, szrem(55)),
        font: $f3,
        transform: uppercase
    ));
}

@mixin btn_1($attr: ()) {
    $with_border: mapv($attr, with_border, true);
    $bg: mapv($attr, bg, $c0);
    $bg_hover: mapv($attr, bg_hover, $c1);
    $color: mapv($attr, color, $c1);
    $color_hover: mapv($attr, color_hover, $c2);
    $width: mapv($attr, width, $l16x);
    $height: mapv($attr, height, $l16y);
    $weight: mapv($attr, weight, 700);

    all: initial;
    @include transition(all $t5);
    @include center-flex-column;
    @include user-select;
    @include border-radius(5px);
    @include bc($bg, $color);
    @include wh(
        nth($width, 1),
        nth($height, 1)
    );
    cursor: pointer;

    @if $with_border { border: $bd1; }

    @include brp($b6) {
        @include wh(
            nth($width, 2),
            nth($height, 2)
        );
    }

    @include brp($b9) {
        @include wh(
            nth($width, 3),
            nth($height, 3)
        );
    }

    &:hover {
        @include transition(all $t5);
        @include bc($bg_hover, $color_hover);
    }

    .content_link {
        @include t1((
            weight: $weight,
            transform: uppercase
        ));
        color: inherit;

        @include brp($b6) {
            font-size: szrem(18);
        }

        @include brp($b9) {
            font-size: szrem(16);
        }
    }
} // end btn_1

@mixin btn_2($attr: ()) {
    $bg: mapv($attr, bg, $c0);
    $color: mapv($attr, color, $c1);
    $width: mapv($attr, width, $l16x);
    $height: mapv($attr, height, $l16y);

    all: initial;
    @include transition(all $t5);
    @include center-flex-column;
    @include border-radius(5px);
    @include user-select;
    @include bc($bg, $color);
    @include wh(
        nth($width, 1),
        nth($height, 1)
    );
    padding-inline: 25px;
    cursor: pointer;

    @include brp($b6) {
        @include wh(
            nth($width, 2),
            nth($height, 2)
        );
    }

    &:hover {
        @include transition(all $t5);
        @include bc($c2, $c1);
    }

    .content_link {
        @include align-items(center);;
        @include gap(10px);
        @include flex;
        @include t1((
            transform: uppercase
        ));
        color: inherit;

        @include brp($b6) {
            font-size: szrem(18);
        }
    }
} // end btn_2

@mixin marquee($attr: ()) {
    $anim: mapv($attr, anim, marquee_1);
    $duration: mapv($attr, duration, 7s);
    $gap: mapv($attr, gap, 15vw);
    $svg: mapv($attr, svg, ".trionda");
    $svg-width: mapv($attr, svg-width, nth($l3, 1));
    $svg-ratio: mapv($attr, svg-ratio, calc(637 / 150));
    $translate: mapv($attr, translate, false);
    $display: mapv($attr, display, flex);
    $grid: mapv($attr, grid, true);
    $w_m: mapv($attr, width_marquee, 0);

    @include flex;
    @include animation(#{$anim} $duration linear infinite);

    @if $w_m != 0 {
        @include wh($w_m);
    }

    @if $translate == true {
        @include transform(translateX(-100vw));
    }

    .marquee_content {
        @include wh(100vw);
        padding-inline: calc(#{$gap} / 2);
        display: $display;

        @if $w_m != 0 {
            @include justify-content(space-around);
        }

        @if $grid {
            @include gap($gap);
        }

        #{$svg} {
            @include normalize-svg((
                width: $svg-width,
                aspect-ratio: $svg-ratio
            ));
        }

        .country {
            @include transition(color $t5);
            @include t1((
                size: min(4.90vw, szrem(94)),
                transform: uppercase,
                font: $f3
            ));
        }

        .wc {
            @include t1((
                size: clamp(szrem(16), 1.15vw, szrem(22)),
                weight: 700,
                transform: uppercase
            ));
        }
    }
} // end marquee

@mixin tooltip($attr: ()) {
    $direction: mapv($attr, direction, bottom);
    $b: mapv($attr, base, 28px);
    $h: mapv($attr, height, 16px);
    $p: mapv($attr, ubication, 50%);
    $r: mapv($attr, radius, 10px);
    $gradient: mapv($attr, gradient, linear-gradient(0deg, $c5, $c5));

    --b: #{$b};
    --h: #{$h};
    --p: #{$p};

    @include border-radius($r);
    @include user-select;
    position: absolute;
    padding: 30px 20px;
    z-index: 1;

    @include brp($b8) {
        padding: 15px 14px;
    }

    @if $direction == bottom {
        background: 0 0/100% calc(100% + var(--h)) #{$gradient};
    }
    @else if $direction == top {
        background: 0 100%/100% calc(100% + var(--h)) #{$gradient};
    }
    @else if $direction == right {
        background: 0/calc(100% + var(--h)) 100% #{$gradient};
    }
    @else if $direction == left {
        background: 100%/calc(100% + var(--h)) 100% #{$gradient};
    }

    &:before {
        @include position(absolute);
        background-image: inherit;
        content: "";
        z-index: -1;

        @include brp($b8) {
            display: none;
        }

        @if $direction == bottom {
            inset: 0 0 calc(-1*var(--h));
            clip-path: polygon(
                min(100%,var(--p) + var(--b)/2) calc(100% - var(--h)),
                var(--p) 100%,
                max(0%,var(--p) - var(--b)/2) calc(100% - var(--h)),
                50% 50%
            );
        }
        @else if $direction == top {
            inset: calc(-1*var(--h)) 0 0;
            clip-path: polygon(
                min(100%,var(--p) + var(--b)/2) var(--h),
                var(--p) 0,
                max(0%,var(--p) - var(--b)/2) var(--h),
                50% 50%
            );
        }
        @else if $direction == right {
            inset: 0 calc(-1*var(--h)) 0 0;
            clip-path: polygon(
                calc(99% - var(--h)) max(0%,var(--p) - var(--b)/2),
                100% var(--p),
                calc(99% - var(--h)) min(100%,var(--p) + var(--b)/2),
                50% 50%
            );
        }
        @else if $direction == left {
            inset: 0 0 0 calc(-1*var(--h));
            clip-path: polygon(
                var(--h) max(0%,var(--p) - var(--b)/2),
                0 var(--p),
                var(--h) min(100%,var(--p) + var(--b)/2),
                50% 50%
            );
        }
    }
}

@mixin btn_controls($attr: ()) {
    $x: mapv($attr, x, 0);
    $y: mapv($attr, y, 0);

    @include center-flex-column;
    @include border-radius(50%);
    @include user-select;
    @include bc(rgba($c1, 0.1), $c0);
    @include normalize-svg((
        width: nth($l11y, 1) + 30px,
        height: nth($l11y, 1) + 30px,
        x: $x,
        y: $y
    ));
    cursor: pointer;

    @include brp($b7) {
        @include whs(nth($l11x, 1) + 30px);
    }
}

@mixin fade() {
    .slider_showcase {
        .slider_item {
            @include transform(scale(1.5));
            @include transition(all 250ms ease-in-out);
            opacity: 0;

            &.active {
                @include transform(scale(1));
                opacity: 1;
            }
        }
    }
}

@mixin ss_container ($ss_w: 1920px, $ss_h: 780px, $attr: ()) {
    $size: mapv($attr, size, 100%);

    @include user-select;
    @include position;
    @include wh(100%);
    max-width: $ss_w;
    margin: {
        top: 0;
        bottom: 0;
        left: auto;
        right: auto;
    };

    .slider_showcase {
        @include position;
        @include wh($size);
        aspect-ratio: calc($ss_w/$ss_h);
        overflow: hidden;

        .slider_item {
            @include position(absolute);
            @include center-flex-column;
            @include whs(100%);
            overflow: hidden;
            z-index: 1;

            &.active { z-index: 3; }
            &.prev { z-index: 2; }

            .img_slider {
                @include wh(100%);
                aspect-ratio: calc(500 / 250);
                margin-block-end: 25px;
                object-fit: cover;
            }

            .container_description_slider {
                margin-block-end: 25px;

                @include brp($b7) {
                    margin-block-end: 0px;
                }

                .description_slider {
                    @include wh(500px);
                    @include t1((
                        transform: uppercase,
                        weight: 400
                    ));
                }

                .price {
                    @include wh(500px);
                    @include t1((
                        transform: uppercase,
                        weight: 400
                    ));
                }
            }
        }
    }
}

@mixin container_visor {
    @include transform(translate(-50%, -50%));
    @include position(absolute, 50%, 52%);
    @include whs(min(36.46vw, 700px));

    @include brp($b6) {
        @include whs(min(66.33vw, 650px));
    }
}

@mixin circle($attr: ()) {
    $dir: mapv($attr, direction, right);

    @include transform(translateY(-50%));
    @include filter(blur(250px));
    @include position(
        absolute, 50%, var(--header-size, 1100px),
        top, $dir
    );
    @include whs(min(98.13vw, var(--header-size, 1100px)));
    @include border-radius(50%);
    @include bc(var(--c6), $c0);
    display: block;
    content: "";
    z-index: 1;

    @include brp($b6) {
        display: none;
    }
}

@mixin bg_main_jersey($attr: ()) {
    $country: mapv($attr, country, arg);
    $location : mapv($attr, location, $i4);

    @include wh(100vw);
    @include position(absolute);
    @include background((
        url: $location + $country + ".webp",
        position: top center,
        size: cover
    ));
    aspect-ratio: calc(1920 / 250);
    display: none;
    z-index: 0;

    @include brp($b6) {
        aspect-ratio: calc(360 / 150);
    }

    &.active {
        @include animation(fadeInNone $t5 linear forwards);
        display: block;
    }

    &.inactive {
        @include animation(fadeOutNone $t5 linear forwards);
    }
} // bg_main_jersey

@mixin icon_svg_mask($attr: ()) {
    $svg: mapv($attr, svg, false);
    $color: mapv($attr, color, $c1);
    $pos: mapv($attr, position, absolute);
    $x: mapv($attr, x, 0);
    $y: mapv($attr, y, 0);
    $xaxis: mapv($attr, xaxis, left);
    $yaxis: mapv($attr, yaxis, top);
    $w: mapv($attr, width, 100px);
    $h: mapv($attr, height, 100px);
    $repeat: mapv($attr, repeat, no-repeat);
    $size: mapv($attr, size, contain);
    $path: mapv($attr, path, $i1);

    @if $svg != false {
        @if $pos != false {
            @include position($pos, $y, $x, $yaxis, $xaxis);
        }

        @include wh($w, $h);
        $path_svg: $path +  $svg + ".svg";
        mask-image: svg-load($path_svg, fill="currentColor");
        mask-repeat: $repeat;
        mask-size: $size;
        display: block;
        background-color: $color;
    }
}

@mixin bg_game($attr: ()) {
    $w: mapv($attr, width, 96.8%);
    $w2: mapv($attr, width-2, 90vw);
    $h: mapv($attr, height, 95%);
    $h2: mapv($attr, height-2, 100%);
    $z: mapv($attr, z, 2);
    $as: mapv($attr, aspect-ratio, calc(0));
    $as2: mapv($attr, aspect-ratio-2, calc(0));
    $bg: mapv($attr, bg, var(--c5a));
    $color: mapv($attr, color, var(--c1));
    $gap: mapv($attr, gap, 25px);

    @if $h != false {
        @include wh($w, $h);
    }
    @else {
        @include wh($w);
        aspect-ratio: $as;

        @include brp($b6) {
            @if $as2 == 0 {
                @include wh($w2, $h2);
            }
            @else {
                @include wh($w2);
                aspect-ratio: $as2;
            }
        }
    }

    @include center-flex-column;
    @include hv-center;
    @include border-radius(10px);
    @include bc($bg, $color);
    @include gap($gap);
    padding-block: 25px;
    opacity: 1;
    backdrop-filter: blur(30px);
    border: $bd2;
    z-index: $z;
}

@mixin modal_game($attr: ()) {
    $status: mapv($attr, status, win);

    @include bg_game((
        width: min(36.04vw, 692px),
        width-2: 90vw,
        height: false,
        aspect-ratio: calc(692 / 422),
        aspect-ratio-2: 0,
        height-2: 100%,
        z: 3
    ));

    &.active {
        @include animation(fadeInNone $t5 linear forwards);
    }

    &.inactive {
        @include animation(fadeOutNone $t5 linear forwards);
    }

    #{".title_" + $status + "_game"} {
        @include wh(90%);
        @include bc($c0, $c1);
        @include t1((
            transform: uppercase,
            weight: 700,
            size: clamp(szrem(28), 2.60vw, szrem(50))
        ));
        margin-inline: auto;
    }

    #{".description_" + $status + "_game"} {
        @include wh(95%);
        @include bc($c0, $c1);
        @include t1((
            size: clamp(szrem(14), 1.15vw, szrem(22))
        ));

        @include brp($b6) {
            @include wh(80%);
        }
    }

    .btn_reload_game {
        @include btn_1((
            bg: $c1,
            color: $c2,
            weight: 400
        ));
    }
}

//-----------------------------------
//End Mixin
//-----------------------------------