@import "instance";

.historic_balls {
    @include position;
    @include user-select;
    @include wh(100vw);
    background-image: $gra2;
    overflow: hidden;
    z-index: 1;

    @include brp($b7) {
        padding-block-start: 50px;
    }

    .container_slider_historic {
        @include wh(min(100vw, 1920px));
        @include position;
        aspect-ratio: calc(16 / 9);
        margin-inline: auto;

        @include brp($b7) {
            @include wh(min(100vw, 640px));
            aspect-ratio: 0.55;
        }

        .container_historic_balls {
            @include position(absolute, min(4.69vw, 90px), min(2.60vw, 50px));
            @include wh(max-content);
            z-index: 3;

            @include brp($b7) {
                @include transform(translateX(-50%));
                @include wh(min(84vw, 640px));
                top: 3%;
                left: 50%;
            }


            .container_title_historic_balls {
                @include flex-direction(column);
                @include flex;
                @include gap(15px);
                @include wh(min(40.36vw, 775px));

                @include brp($b7) {
                    @include wh(initial, initial);

                }

                .title_historic_balls {
                    @include t1((
                        font: $f2,
                        size: min(7.81vw, szrem(150)),
                        align: left
                    ));
                    @include bc($c0, $c4);
                    line-height: 0.85;

                    @include brp($b7) {
                        font-size: min(13.02vw, szrem(100));
                    }
                }

                .description_historic_balls {
                    @include t1((
                        font: $f1,
                        size: clamp(szrem(14), 1.04vw, szrem(20)),
                        align: left
                    ));
                    @include bc($c0, $c1);

                    @include brp($b7) {
                        font-size: clamp(szrem(14), 2.60vw, szrem(20));
                    }
                }
            }
        }

        .slider_historic {
            @include position(absolute);
            @include wh(min(100vw, 1920px));
            aspect-ratio: calc(16 / 9);
            display: block;
            z-index: 2;

            @include brp($b7) {
                @include wh(min(100vw, 640px));
                aspect-ratio: 0.55;
            }

            .slider_item {
                @include transition(opacity $t3 ease-in-out);
                opacity: 0;

                &.active {
                    @include transition(opacity $t3 ease-in-out);
                    opacity: 1;
                }

                .content_historic_balls {
                    @include position(absolute, min(13.02vw, 250px), min(2.60vw, 50px), bottom);
                    @include wh(min(40.36vw, 775px));

                    @include brp($b7) {
                        @include transform(translateX(-50%));
                        @include wh(min(90vw, 640px));
                        bottom: 3%;
                        left: 50%;
                    }

                    .container_title {
                        @include align-items(flex-end);
                        @include flex;
                        @include gap(1rem);

                        .title_historic_balls {
                            @include t1((
                                size: min(6.25vw, szrem(120)),
                                transform: uppercase,
                                weight: 700,
                                align: left
                            ));
                            @include bc($c0, $c6);
                            line-height: 0.85;

                            @include brp($b7) {
                                font-size: min(14.06vw, szrem(90));
                            }
                        }

                        .country {
                            @include t1((
                                size: min(2.60vw, szrem(50)),
                                transform: uppercase,
                                weight: 700,
                                align: left
                            ));
                            @include bc($c0, $c6);

                            @include brp($b7) {
                                font-size: min(6.25vw, szrem(40));
                            }
                        }
                    }

                    .description_slider {
                        @include bc($c0, $c1);
                        @include t1((
                            size: clamp(szrem(12), 1.04vw, szrem(20)),
                            align: left
                        ));

                        @include brp($b7) {
                            font-size: clamp(szrem(12), 3.13vw, szrem(20));
                        }
                    }
                }

                .year_historic_balls {
                    @include position(
                        absolute,
                        min(7.29vw, 140px),
                        min(4.69vw, 90px),
                        bottom, right);
                    @include bc($c0, $c6);
                    @include t1((
                        font: $f2,
                        size: min(12.50vw, szrem(240)),
                        transform: uppercase,
                        align: left,
                        weight: 400
                    ));

                    @include brp($b7) {
                        font-size: min(19.53vw, szrem(150));
                        bottom: 28%;
                        right: 4%;
                    }
                }
            }
        } // .slider_historic

        .indicators {
            @include position(absolute, min(7.81vw, 150px), min(3.64vw, 70px), bottom);

            @include brp($b7) {
                @include transform(translateX(-50%));
                bottom: 23.5%;
                left: 50%;
            }

            > ul {
                @include align-items(center);
                @include position;
                @include flex;
                @include gap(clamp(10px, 1.82vw, 35px));
                @include wh(max-content, 30px);

                @include brp($b7) {
                    @include justify-content(space-between);
                    @include gap(initial);
                    width: 90vw;
                }

                &::before {
                    @include transform(translateY(-50%));
                    @include position(absolute, 50%, 0, top);
                    @include wh(100%, 1px);
                    @include bc($c1, $c0);
                    content: "";
                    z-index: 1;
                }

                > li {
                    @include transition(all $t5);
                    @include ht;
                    @include position;
                    @include user-select;
                    @include border-radius(50%);
                    @include bc($c1, $c0);
                    @include whs(15px);
                    cursor: pointer;
                    z-index: 2;

                    @include brp($b8) {
                        @include whs(10px);
                    }

                    &.active {
                        @include transition(all $t5);
                        @include bc($c6, $c0);
                        @include whs(30px);
                        z-index: 3;

                        @include brp($b8) {
                            @include whs(15px);
                        }
                    }
                }
            }
        }

        .controls {
            @include flex-direction(row-reverse);
            @include justify-content(space-between);
            @include position(absolute, 46%, 45.5%);
            @include wh(min(36.46vw, 700px));
            @include flex;

            @include brp($b7) {
                @include wh(min(78.90vw, 505px));
                top: 43%;
                left: 13%;
            }

            .next_historic { @include btn_controls; }
            .prev_historic { @include btn_controls; }
        }
    } // .container_slider_historic

    .container_balls {
        @include wh(min(100vw, 1920px));
        @include position(absolute);
        aspect-ratio: calc(16 / 9);
        margin-inline: auto;
        z-index: 1;

        @include brp($b7) {
            @include wh(min(100vw, 640px));
            aspect-ratio: 0.55;
        }

        .item_ball {
            @include transition(all $t3 ease-in-out);
            @include position(absolute, 40%, 26%);
            @include user-select;
            @include whs(200px);
            opacity: 0;
            z-index: 0;

            &.active {
                @include whs(min(31.25vw, 600px));
                top: 22%;
                left: 48%;
                opacity: 1;
                z-index: 4;

                @include brp($b7) {
                    @include whs(min(67.77vw, 434px));
                    top: 27%;
                    left: 19%;
                }
            }

            &.prev_1 {
                @include whs(min(52.08vw, 1000px));
                @include filter(blur(5px));
                top: 6%;
                left: 86%;
                opacity: 1;
                z-index: 5;

                @include brp($b7) {
                    @include whs(min(112.77vw, 721px));
                    top: 14%;
                    left: 95%;
                }
            }

            $whs: (min(15.63vw, 300px), min(10.41vw, 200px), min(5.21vw, 100px));
            $blurs: (5px, 7px, 10px);
            $tops: (36%, 40%, 45%);
            $lefts: (35%, 26%, 21%);
            $opacs: (0.5, 0.35, 0.25);
            $zindex: (3, 2, 1);

            @for $i from 1 through length($whs) {
                &.next_#{$i} {
                    @include whs(nth($whs, $i));
                    @include filter(blur(nth($blurs, $i)));
                    top: nth($tops, $i);
                    left: nth($lefts, $i);
                    opacity: nth($opacs, $i);
                    z-index: nth($zindex, $i);

                    @include brp($b7) {
                        @if ($i == 1) {
                            @include whs(min(33.33vw, 213px));
                            top: 36%;
                            left: -10%;
                        }

                        @if ($i == 2 or $i == 3) {
                            display: none;
                        }
                    }
                }
            }

            .img_ball {
                @include filter(drop-shadow(0px 0px 9px $c1));
                @include whs(100%);
                object-fit: contain;
                display: block;

            }
        }
    } // .container_balls
}