@import "instance";

.mslideraway {
    .slider_away {
        .bg_main_slider {
            .bg_item {
                .country {
                    top: -2%;
                }
                .info_aside {
                    @include brp($b3){
                        top: 0%;
                    }
                }
            }
        }
    }
}

.slider_away {
    @include position;
    @include user-select;
    @include wh(100vw);
    padding-block-end: 100px;
    z-index: 1;

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

    &::after { @include bg_two_section; }

    .menu_product {
        padding-block-start: 20px;
        padding-block-end: 0;
    }

    .container_slider_away {
        @include wh(min(28.54vw, 548px));
        @include position;
        aspect-ratio: calc(548 / 700);
        margin-block: min(1.56vw, 30px) min(1.04vw, 20px);
        margin-inline: auto;
        z-index: 3;

        @include brp($b5) {
            aspect-ratio: calc(548 / 780);
        }

        @include brp($b7) {
            @include wh(min(92vw, 350px));
            aspect-ratio: calc(548 / 720);
        }

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

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

            .slider_item {
                @include filter($filter);
                @include transition(all $t5 ease-in-out);
                @include position(absolute);
                z-index: 3;
                opacity: 0;
                scale: 0.7;

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

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

                    @include brp($b7) {
                        @include wh(min(92vw, 350px));
                    }

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

                .title_main_slider {
                    @include t1((
                        size: clamp(szrem(24), 1.66vw, szrem(32)),
                        weight: 700,
                        transform: uppercase
                    ));
                    margin-block-start: clamp(5px, 1.04vw, 20px);
                }
            }
        }

        .indicators {
            @include position(absolute, 0, 50%, bottom);
            @include transform(translate(-50%, 0));
            z-index: 30;

            ul {
                @include flex;
                @include gap(5px);

                li {
                    @include border-radius(50%);
                    @include whs(10px);
                    @include ht;
                    padding: 0 !important;
                    background-color: rgba($c1, 0.25) !important;
                    cursor: pointer;

                    &:last-child { margin-right: 0; }

                    &.active { background-color: $c1 !important; }
                }
            }
        }

        .controls {
            @include transform(translateX(-50%));
            @include position(absolute, 20%, 50%, bottom);
            @include justify-content(space-between);
            @include wh(clamp(450px, 39.25vw, 600px));
            @include flex-direction(row-reverse);
            @include flex;
            z-index: 3;

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

            .next_slider_away {
                @include btn_controls;
                border: $bd2;
            }

            .prev_slider_away {
                @include btn_controls;
                border: $bd2;
            }
        }
    } // container_slider_away

    .invitation {
        @include position;
        @include t1((
            size: szrem(16)
        ));
        margin-inline: auto;
        z-index: 2;
    } // invitation

    .bg_main_slider { @include bg_away; }
}