@use "sass:list";
@import "instance";

.icon_reload {
    &::before {
        @include icon_svg_mask((
            position: false,
            svg: arrow_6,
            width: nth($l19x, 1),
            height: nth($l19y, 1)
        ));
        content: "";
    }
}

.logo_decoration {
    @include icon_svg_mask((
        svg: logo_adidas,
        width: nth($l13x, 3),
        height: nth($l13y, 3),
        color: $c3
    ));
}

.logo_adidas_footer {
    &::before {
        @include icon-svg(
            logo_adidas,
            nth($l13x, 1),
            nth($l13y, 1),
            $c4
        );
        content: "";

        @include brp($b6) {
            @include wh(
                nth($l13x, 2),
                nth($l13y, 2)
            );
        }
    }
}

.logo_adidas_fifa_wc26 {
    &::before {
        @include icon_svg_mask((
            svg: logo_adidas_fifa_wc26,
            width: nth($l1x, 1),
            height: nth($l1y, 1),
            color: $c1
        ));
        position: relative;
        display: block;
        content: "";

        @include brp($b6) {
            @include wh(
                nth($l1x, 3),
                nth($l1y, 3)
            );
        }
    }
}

.logo_fifa_wc26_fed {
    &::before {
        @include icon_svg_mask((
            width: nth($l1x, 2),
            svg: logo_adidas_fifa_wc26,
            height: nth($l1y, 2),
            color: var(--cbrand1)
        ));
        content: "";

        @include brp($b6) {
            @include wh(
                nth($l1x, 4),
                nth($l1y, 4)
            );
        }

        @include brp($b8) {
            @include wh(
                nth($l1x, 5),
                nth($l1y, 5)
            );
        }
    }
}

.logo_adidas_fifa_wc26_2 {
    &::before {
        @include icon_svg_mask((
            width: nth($l1x, 2),
            svg: logo_adidas_fifa_wc26,
            height: nth($l1y, 2),
            color: var(--cbrand1)
        ));
        content: "";

        @include brp($b6) {
            @include wh(
                nth($l1x, 4),
                nth($l1y, 4)
            );
        }

        @include brp($b8) {
            @include wh(
                nth($l1x, 5),
                nth($l1y, 5)
            );
        }
    }
}

.icon_bag {
    &::after {
        @include icon-svg(
            bag,
            nth($l2x, 1),
            nth($l2y, 1),
            $c2
        );
        position: relative;
        display: block;
        content: "";

        @include brp($b6) {
            @include wh(
                nth($l2x, 2),
                nth($l2y, 2)
            );
            top: 2px;
        }
    }
}

.icon_bag_2 {
    &::after {
        @include icon-svg(
            bag,
            nth($l2x, 1),
            nth($l2y, 1),
            $c2
        );
        position: relative;
        display: block;
        content: "";

        @include brp($b6) {
            @include wh(
                nth($l2x, 2),
                nth($l2y, 2)
            );
            top: 2px;
        }
    }
}

.trionda {
    &::before {
        @include icon-svg(
            trionda,
            nth($l3, 1),
            initial,
            $c4
        );
        aspect-ratio: calc(637 / 150);
        content: "";

        @include brp($b6) {
            width: nth($l3, 3);
        }
    }
}

.trionda_showcase {
    &::before {
        @include icon-svg(
            trionda,
            nth($l3, 2),
            initial,
            $c4
        );
        aspect-ratio: calc(637 / 150);
        content: "";

        @include brp($b6) {
            width: nth($l3, 4);
        }
    }
}

.fifa_world_cup {
    &::before {
        @include icon-svg(
            fifa_world_cup,
            nth($l4, 1),
            inicial,
            $c4
        );
        aspect-ratio: calc(352 / 30);
        content: "";

        @include brp($b6) {
            width: nth($l4, 2);
        }
    }
}

.fifa_world_cup_2 {
    &::before {
        @include icon_svg_mask((
            svg: fifa_world_cup_2,
            width: nth($l6x, 1),
            height: nth($l6y, 1),
            color: var(--cbrand1)
        ));
        content: "";

        @include brp($b6) {
            @include wh(
                nth($l6x, 2),
                nth($l6y, 2)
            );
        }

        @include brp($b8) {
            @include wh(
                nth($l6x, 3),
                nth($l6y, 3)
            );
        }
    }
}

.copa_del_mundo {
    &::before {
        @include icon_svg_mask((
            svg: copa_fifa,
            width: nth($l6_custom_x, 1),
            height: nth($l6_custom_y, 1),
            color: var(--cbrand1)
        ));
        content: "";

        @include brp($b6) {
            @include wh(
                nth($l6_custom_x, 2),
                nth($l6_custom_y, 2)
            );
        }

        @include brp($b8) {
            @include wh(
                nth($l6_custom_x, 3),
                nth($l6_custom_y, 3)
            );
        }
    }
}

.official_match_ball {
    &::before {
        @include icon_svg_mask((
            svg: jersey,
            width: nth($l17_custom_x, 1),
            height: nth($l17_custom_y, 1),
            color: var(--cbrand1)
        ));
        content: "";

        @include brp($b6) {
            @include wh(
                nth($l17_custom_x, 2),
                nth($l17_custom_y, 2)
            );
        }

        @include brp($b8) {
            @include wh(
                nth($l17_custom_x, 3),
                nth($l17_custom_y, 3)
            );
        }
    }
}

.camiseta_oficial {
    &::before {
        @include icon_svg_mask((
            svg: camiseta_titular,
            width: nth($l7x, 1),
            height: nth($l7y, 1),
            color: var(--cbrand1)
        ));
        content: "";

        @include brp($b6) {
            @include wh(
                nth($l7x, 2),
                nth($l7y, 2)
            );
        }

        @include brp($b8) {
            @include wh(
                nth($l7x, 3),
                nth($l7y, 3)
            );
        }
    }
}

.arrow_1 {
    &::before {
        @include icon-svg(
            arrow_1,
            nth($l5x, 1),
            nth($l5y, 1),
            $c1
        );
        position: relative;
        display: inline-block;
        content: "";
    }
}

.arrow_2 {
    &::after {
        @include icon-svg(
            arrow_2,
            nth($l5x, 1),
            nth($l5y, 1),
            $c1
        );
        position: relative;
        display: inline-block;
        content: "";
    }
}

.arrow_3 {
    &::after {
        @include icon-svg(
            arrow_3,
            nth($l8, 1),
            nth($l8, 1),
            $c1
        );
        position: relative;
        top: 3px;
        display: block;
        content: "";
    }
}

.open_tooltip {
    &::before {
        @include icon-svg(
            plus,
            nth($l9, 1),
            nth($l9, 1),
            $c1
        );
        position: relative;
        display: block;
        content: "";
    }
}

.close_tooltip {
    &::before {
        @include icon-svg(
            close,
            nth($l10, 1),
            nth($l10, 1),
            $c1
        );
        position: relative;
        display: block;
        content: "";
    }
}

.close_modal {
    &::before {
        @include transform(translate(-50%, -50%));
        @include icon-svg(
            close,
            nth($l10, 1),
            nth($l10, 1),
            $c1
        );
        position: absolute;
        top: 50%;
        left: 50%;
        display: block;
        content: "";
    }
}

.next_historic {
    &::before {
        @include icon-svg(
            arrow_5,
            nth($l11x, 1),
            nth($l11y, 1),
            $c1
        );
        position: relative;
        display: block;
        content: "";
    }
}

.prev_historic {
    &::before {
        @include icon-svg(
            arrow_4,
            nth($l11x, 1),
            nth($l11y, 1),
            $c1
        );
        position: relative;
        display: block;
        content: "";
    }
}

.next_slider_jersey{
    &::before {
        @include icon_svg_mask((
            svg: arrow_5,
            width: nth($l11x, 1),
            height: nth($l11y, 1),
            color: $c1
        ));
        position: relative;
        display: block;
        content: "";
    }
}

.prev_slider_jersey{
    &::before {
        @include icon_svg_mask((
            svg: arrow_4,
            width: nth($l11x, 1),
            height: nth($l11y, 1),
            color: $c1
        ));
        position: relative;
        display: block;
        content: "";
    }
}
.btn_fed_next {
    &::before {
        @include icon-svg(
            arrow_5,
            nth($l11x, 1),
            nth($l11y, 1),
            $c1
        );
        position: relative;
        display: block;
        content: "";
    }
}


.btn_fed_prev {
    &::before {
        @include icon-svg(
            arrow_4,
            nth($l11x, 1),
            nth($l11y, 1),
            $c1
        );
        position: relative;
        display: block;
        content: "";
    }
}

/*.btn_close_flip_card {
    &::before {
         @include icon_svg_mask((
            svg: close_2,
            width: nth($l18, 1),
            height: nth($l18, 1),
            color: var(--dynamic-color)  // Use CSS variable for real-time changes
        ));
        content: "";
    }
}*/

.logo_adidas_back_card {
    &::before {
        @include icon-svg(
            logo_adidas,
            nth($l13x, 1),
            nth($l13y, 1),
            $c1
        );
        content: "";
    }
}

.btn_close_flip_card {
    &::before {
         @include icon_svg_mask((
            svg: close_2,
            width: nth($l18, 1),
            height: nth($l18, 1),
            color: $c1  // Use CSS variable for real-time changes
        ));
        content: "";
    }
}

.logo_adidas_back_card {
    &::before {
        @include icon-svg(
            logo_adidas,
            nth($l13x, 1),
            nth($l13y, 1),
            $c1
        );
        content: "";
    }
}

.btn_tooltip {
    &::before {
        @include icon-svg(
            plus,
            nth($l9, 1),
            nth($l9, 1),
            $c1
        );
        position: relative;
        display: block;
        content: "";
    }
}

.icon_plus {
    &::before {
        @include icon_svg_mask((
            svg: close_2,
            width: 20px,
            height: 20px,
            color: var(--c10_lp)
        ));
        rotate: 45deg;
        content: "";
    }
}

.logo_adidas_footer_mask {
    &::before {
        @include icon_svg_mask((
            svg: logo_adidas,
            width: nth($l13x, 1),
            height: nth($l13y, 1),
            color: var(--c1)
        ));
        content: "";

        @include brp($b6) {
            @include wh(
                nth($l13x, 2),
                nth($l13y, 2)
            );
        }
    }
}

.icon_info {
    &::after {
        @include icon-svg(
            info,
            nth($l17_l, 1),
            nth($l17_l, 1),
            $c1
        );
        content: "";
    }
}