@import "instance";

.full_marquee_bg {
    @include flex-direction(column);
    @include user-select;
    @include wh(100vw);
    @include flex;
    overflow: hidden;
    z-index: 1;

    &.theme_black {
        .marquee_full {
            .marquee_item { color: $c2; }
            .img_1, .img_2 { .img { @include filter(none); } }
        }
    }

    &.with_black_bg {
        background-color: $c2;
        padding-block: 25px;

        @include brp($b6) {
            padding-block: 15px;
        }
    }

    .marquee_full {
        @include marquee((
            display: inline-flex,
            duration: 22s,
            grid: false,
            gap: 8vw,
            width_marquee: 200vw
        ));

        .marquee_content {
            background-color: $c0;
            padding: 0;
        }

        .marquee_item {
            @include center-flex-column;
            @include t1((
                size: clamp(szrem(16), 1.15vw, szrem(22)),
                transform: uppercase,
                weight: 700
            ));
            color: $c1;
        }

        .img_1,
        .img_2 {
            @include center-flex-column;

            .img {
                @include filter(invert(1));
                @include wh(auto, clamp(18px, 1.56vw, 30px));
                display: block;
            }
        }

        .text_1, .text_2 {
            white-space: nowrap;

            @include brp($b6) {
                font-size: clamp(szrem(10), 1.63vw, szrem(16));
            }
        }

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