@import "instance";
@import "node_modules/sisass/src/scss/components/buttons";

.pro_jersey {
    @include user-select;
    @include position;
    @include wh(100vw);
    background-image: $gra1;
    overflow: hidden;
    padding-block: clamp(50px, 5.21vw, 50px);
    z-index: 1;

    .btn_fed {
        display: none;
    }

    .container_pro_jersey {
        @include center-flex-column;
        @include wh(min(100vw, 1920px));
        margin-inline: auto;
        z-index: 1;

        .container_title_pro_jersey {
            margin-block-end: 50px;

            .title_pro_jersey {
                @include t1((
                    font: $f3,
                    size: clamp(szrem(50), 3.75vw, szrem(125)),
                    weight: 400,
                    transform: uppercase,
                    align: center
                ));
                @include bc($c0, var(--c4));

                @include brp($b8) {
                    margin: 0 auto;
                    width: 270px;
                }
            }
        }

        .instruction {
            @include t1((
                font: $f1,
                size: clamp(szrem(21), 1.25vw, szrem(24)),
                weight: 400,
                transform: uppercase,
                align: center
            ));
            @include bc($c0, var(--c2));
            margin-block-start: 60px;
            margin-block-end: 50px;
            max-width: 80vw;
        }

        .instruction_products {
            @include t1((
                font: $f1,
                size: clamp(szrem(21), 1.25vw, szrem(24)),
                weight: 400,
                transform: inherit,
                align: center
            ));
            @include bc($c0, $c1);
            margin-block-start: 30px;
            margin-block-end: 0;
            max-width: 80vw;
        }

        .swiper {
            overflow: visible;

            .swiper-wrapper {
                @include wh(min(75vw, 1920px));
                grid-template-rows: 100px 1fr 2px 80px;

                .card {
                    @include wh(340px);
                    @include user_select;
                    @include position;
                    aspect-ratio: calc(340 / 660);
                    max-height: 700px;
                    padding: 15px;

                    &.active {
                        .front {
                            @include transform(perspective(600px) rotateY(-180deg));
                        }
                        .back {
                            @include transform(perspective(600px) rotateY(0));
                        }
                    }

                    .item_card {
                        @include transition(all 0.6s linear);
                        @include position(absolute);
                        @include border-radius(10px);
                        @include bc(rgba($c1, 0.1), $c1);
                        @include whs(100%);
                        backface-visibility: hidden;
                        overflow: hidden;
                    }

                    .front {
                        @include transform(perspective(600px) rotateY(0));
                        @include center-flex-column;
                        @include bc($c1, $c0);

                        .btn_flip_card {
                            all: initial;
                            @include position(absolute);
                            @include whs(100%);
                            cursor: pointer;
                            z-index: 2;
                        }

                        .information {
                            @include position(absolute, 11px, 9px, top, right);
                            @include flex-direction(row-reverse);
                            @include align-items(center);
                            @include border-radius(33px);
                            @include gap(5px);
                            @include flex;
                            @include bc(var(--c_info_f0), $c0);
                            padding: 4px 12px;

                            .icon_info {
                                @include whs(nth($l17_l, 2));
                                @include position(relative);

                                &::after {
                                    @include whs(nth($l17_l, 2));
                                }
                            }

                            .content_link {
                                @include bc($c0, var(--c1));
                                @include t1((font: $f1,
                                    size: szrem(16),
                                    weight: 400,
                                    align: center
                                ));
                            }
                        }

                        .img_product {
                            @include justify-self(center);
                            @include wh(100%);
                            aspect-ratio: 1;
                            margin-block-end: 25px;
                            margin-block-start: 10px;
                            display: block;
                            object-fit: contain;
                            max-width: 301px;
                            max-height: 301px;
                        }

                        .name_product {
                            @include t1((
                                font: $f1,
                                size: clamp(szrem(17), 1.15vw, szrem(27)),
                                weight: 700,
                                transform: uppercase,
                                align: left
                            ));
                            @include bc($c0, $c2);
                            padding-inline: 5%;
                            text-wrap-style: balance;
                            min-height: 54px;
                            width: 100%;
                        }

                        .price_product {
                            @include t1((
                                font: $f1,
                                size: clamp(szrem(18), 1.25vw, szrem(24)),
                                weight: 400,
                                transform: uppercase,
                                align: left
                            ));
                            @include bc($c0, $c2);
                            margin-block-end: 15px;
                            margin-block-start: 5px;
                            padding-inline: 5%;
                            width: 100%;
                        }

                        .btn_buy {
                            @include btn_2(( bg: $c2, color: $c1 ));
                            @include position;
                            @include border-radius(0);
                            margin-left: 5%;
                            margin-right: auto;
                            padding-inline: 10px;
                            z-index: 3;

                            &.btn_arrow {
                                @include button_style_adidas_1((
                                    aspect_ratio: calc(210 / 35),
                                    align: left,
                                    size: 24px,
                                    icon_right: true,
                                    weight: 400,
                                    width: 70%
                                ));
                                @include border-radius(33px);

                                &::before {
                                    @include border-radius(33px);
                                }

                                .content_link {
                                    width: 100%;

                                    &::after {
                                        left: 0;
                                        top: -1px;
                                    }
                                }
                            }
                        }
                    }
                    // front

                    .back {
                        @include transform(perspective(600px) rotateY(180deg));
                        @include center-flex-column;
                        @include bc($c5, $c1);
                        background-image: $gra1_lr;
                        padding-inline: 20px;

                        .img_technical {
                            @include whs(100%);
                            object-fit: contain;
                            display: block;
                        }

                        .title_back {
                            @include position(relative, 35px);
                            min-height: 56px;
                        }

                        .title_back_1,
                        .title_back_2 {
                            @include t1((
                                font: $f1,
                                size: clamp(szrem(18), 1.45vw, szrem(28)),
                                weight: 700,
                                transform: uppercase,
                                align: center
                            ));
                            @include bc($c0, $c1);
                            display: block;
                            padding-inline: 20px;
                            text-wrap-style: balance;
                        }

                        .btn_close_flip_card {
                            all: initial;
                            @include normalize-svg((
                                width: nth($l18, 1),
                                height: nth($l18, 1),
                                position: absolute,
                                xaxis: right,
                                x: 8px,
                                y: 8px,
                                z: 1
                            ));
                            cursor: pointer;
                        }

                        .container_images_specification {
                            @include center-flex-row;
                            @include flex;
                            @include gap(2%);

                            .img_spe {
                                @include border-radius(7px);
                                @include wh(30%);
                                aspect-ratio: calc(100 / 200);
                                object-fit: cover;
                            }
                        }

                        &.logo_adidas_back_card {
                            &::before {
                                @include normalize-svg((
                                    width: 100%,
                                    height: 100%,
                                    position: absolute,
                                    z: -1
                                ));
                                background-position: bottom -6% center;
                                background-size: 110%;
                                opacity: 0.05;
                                pointer-events: none;
                            }
                        }
                    } // back

                    &[data-federation="argentina"] {
                        .front {
                            .information {
                                @include bc(var(--c_info_f0), $c0);

                                .content_link {
                                    @include bc($c0, $c1);
                                }
                            }
                        }
                    }

                    &[data-federation="colombia"] {
                        .front {
                            .information {
                                @include bc(var(--c_info_f1), $c0);

                                .content_link {
                                    @include bc($c0, $c2);
                                }
                            }
                        }
                    }

                    &[data-federation="mexico"] {
                        .front {
                            .information {
                                @include bc(var(--c_info_f2), $c0);

                                .content_link {
                                    @include bc($c0, $c1);
                                }
                            }
                        }
                    }
                } // card
            } // swiper-wrapper
        } // swiper

        .swiper-scrollbar {
            @include position;
            @include wh(100%, 1px);
            @include bc($c1, $c0);
            cursor: pointer;
            margin: 50px auto 10px;

            .swiper-scrollbar-drag {
                @include border-radius(0);
                @include wh(auto, 9px);
                @include bc($c1, $c0);
                top: -4px;
            }
        }
    }
} // container_pro_jersey