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

.pro_away {
    @include center-flex-column;
    @include bc($c2, $c1);
    @include position;
    padding-block-end: 60px;
    z-index: 1;

    &::before {
        @include bg_two_section((
            gradient: $gra8_j,
            yaxis: top
        ));
    }

    &::after {
        @include bg_two_section((
            gradient: $gra9_j,
            z: 1
        ));
    }

    .bg_pro_away {
        @include position(absolute);
        @include whs(100%);
        background-image: $gra1_a;
        display: block;
        z-index: 1;
    }

    .container_title_pro_away {
        @include position;
        z-index: 2;
        margin-block: 55px 50px;

        @include brp($b6) {
            margin-block-end: 25px;
        }

        .title_pro_away {
            @include t1((
                font: $f1,
                size: clamp(szrem(30), 2.60vw, szrem(50)),
                weight: 700,
                transform: uppercase,
                align: center
            ));
            @include bc($c0, var(--c1));

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

    .instruction {
        @include bc($c0, var(--c1));
        @include position;
        @include t1((
            font: $f1,
            size: clamp(szrem(18), 1.25vw, szrem(24)),
            weight: 400,
            transform: inherit,
            align: center
        ));
        margin-block: 30px 35px;
        max-width: 80vw;
        z-index: 2;

        @include brp($b6) { margin-block-end: 20px; }
    }

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

    .calltoaction {
        @include position;
        margin-bottom: 80px;
        z-index: 2;

        @include brp($b6) {
            margin-bottom: 30px;
        }
    }

    .container_slider {
        @include position;
        width: 88%;
    }

    .pro_away_swiper {
        @include wh(min(1270px, 66.14vw));
        @include position;
        z-index: 3;

        @include brp($b6) {
            width: 100%;
        }

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

            @include brp($b6) {
                width: 100%;
            }

            .card {
                @include border-radius(10px);
                @include bc(rgba($c1, 0.1), $c1);
                @include wh(346px);
                @include user_select;
                @include position;
                background-image: $gra3_l;
                aspect-ratio: calc(346 / 620);
                max-width: 241px;
                max-height: 435px;
                padding: 15px;
                border: 2px solid $c1;

                @include brp($b6) { max-width: 213px; }

                &.in_hover {
                    background-image: none;
                    background-color: $c1;

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

                    .btn_buy.btn_arrow {
                        @include bc($c2, $c1);

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

                }

                .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.04vw, szrem(20)),
                        weight: 700,
                        transform: uppercase,
                        align: left
                    ));
                    @include bc($c0, $c1);
                    padding-inline: 5%;
                    text-wrap-style: balance;
                    width: 100%;
                    min-height: 55px;
                }

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

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

                    &.btn_arrow {
                        @include button_style_adidas_1((
                            aspect_ratio: calc(210 / 30),
                            align: left,
                            size: 24px,
                            icon_right: true,
                            weight: 400,
                            width: 90%,
                            bg: $c1,
                            color: $c2,
                            border_size: 0,
                            border_style: none,
                            border_color: $c0,
                            border_color_hover: $c0
                        ));

                        &:hover {
                            .content_link {
                                border: none;

                                &::after {
                                    left: 5px;
                                }
                            }

                            &::before {
                                display: none;
                                content: "";
                            }
                        }

                        &::before { display: none; }

                        .content_link {
                            width: 100%;

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

                    .content_link {
                        @include t1((size: clamp(szrem(15), 0.93vw, szrem(18))));
                        @include whs(100% !important);
                        @include border-radius(8px);
                    }
                }
            }
        }
    }

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

        @include brp($b6) {
            @include wh(80%, 1px);
            margin: 35px auto 10px;
         }

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

    .group_controlls {
        @include hv-center;
        @include wh(90%, 100px);
        max-width: 1620px;
        z-index: 2;

        @include brp($b6){
            @include wh(95%, 100px);
            z-index: 3;
        }

        .icon_next, .icon_prev {
            @include whs(80px);
            background-color: rgba($c1, 0.2);
            border-radius: 50%;
            border: solid 2px $c1;
            top: 0;

            @include brp($b6) {
                @include whs(50px);
                z-index: 2;
            }

            &::after {
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }
    }

    .container_marquee_away {
        margin-block-start: 0px;
    }
}