@import "instance";

.slider_jersey {
    @include position;
    @include user-select;
    @include wh(100vw);
    z-index: 3;

    @include brp($b6) {
        overflow: hidden;
    }

    .title_main_slider {
        @include t1((
            size: clamp(szrem(24), 1.66vw, szrem(32)),
            weight: 700,
            transform: uppercase
        ));
        margin-block-start: clamp(50px, 6.25vw, 120px);
        margin-block-end: 25px;
    }

    .container_slider_jersey {
        @include wh(min(87.5vw, 1120px));
        @include position();
        aspect-ratio: calc(1120 / 600);
        margin-block: min(5.86vw, 75px);
        margin-inline: auto;
        z-index: 3;

        &::before {
            @include circle;

            @include brp($b7) {
                display: none;
            }
        }
        &::after {
            @include circle(( direction: left ));

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

        @include brp($b7) {
            aspect-ratio: 1;
        }

        .slider_jersey_pro {
            @include position;
            @include flex;
            @include whs(100%);
            z-index: 2;

            $scale: 0.7;
            $filter: drop-shadow($sha1);

            .slider_item {
                @include filter(drop-shadow($sha1));
                @include transition(all $t5 ease-in-out);
                @include position(absolute, 0, 50%);
                transform: translateX(-50%);
                z-index: 3;
                opacity: 1;
                scale: 1;

                &.next {
                    @include filter($filter);
                    @include transform(perspective(1120px) rotateY(26deg));
                    left: 60%;
                    z-index: 2;
                    scale: $scale;

                    @include brp($b7) {
                        @include transform(initial);
                    }
                }

                &.prev {
                    @include filter($filter);
                    @include transform(perspective(1120px) rotateY(-26deg));
                    left: -8%;
                    z-index: 1;
                    scale: $scale;

                    @include brp($b7) {
                        @include transform(initial);
                        left: -47%;
                    }
                }

                .container_img_jersey {
                    @include wh(min(42.81vw, 548px));
                    aspect-ratio: calc(548 / 603);
                    display: block;

                    @include brp($b7) {
                        @include wh(min(76.11vw, 1048px));
                    }

                    .img_jersey {
                        @include whs(100%);
                        aspect-ratio: calc(548 / 603);
                        object-fit: contain;
                    }
                }
            }
        }

        .controls {
            @include transform(translateX(-50%));
            @include position(absolute, 50%, 50%);
            @include justify-content(space-between);
            @include wh(min(90vw, 1260px));
            @include flex-direction(row-reverse);
            @include flex;
            z-index: 3;

            @include brp($b7) {
                top: initial;
            }

            .next_slider_jersey {
                @include btn_controls;
                border: $bd1_j;
            }

            .prev_slider_jersey {
                @include btn_controls;
                border: $bd1_j;
            }
        }
    }
}