@import "~/styles/partials/variables";
@import "~/styles/partials/mixins";

.banner {
    &--section {
        z-index: 1;

        &::after {
            content: '';
            background-color: rgba($primary, 0.4);
            inset: 0;
            position: absolute;
            pointer-events: none;
        }

        img {
            transition: opacity 1s ease-in-out;
            opacity: 0;
            inset: 0;
            min-height: 100vh;
            max-height: 100vh;
            height: 100%;
            object-fit: cover;
            pointer-events: none;
            width: 100%;

            &.active {
                opacity: 1;
            }
        }
    }

    &--group,
    &--scrollIndicator, &--marquee {
        z-index: 1;
    }

    &--marquee {
        bottom: 0;
        left: 0;

        &-list {
            will-change: transform;
            animation: moveLeft 60s linear infinite;
        }
    }

    &--scrollIndicator {
        bottom: 150px;
        left: 0;

        @include maxOrientation(1024, portrait) {
            bottom: 100px;
        }
    }
    &--group{
        &-offering{
            &-modal{
                transition: 0.2s ease-in-out;
                pointer-events: none;
                opacity: 0;
                width: 87vh;
                top: 0;
                left: 0;
                @include maxOrientation(1024, portrait) {
                    width: auto;
                }
                &.open{
                    pointer-events: all;
                    z-index: -1;
                    opacity: 1;


                }
                &-list{
                    &:first-child{
                        margin-right: 30px;
                        padding-right: 30px;
                        border-right: 1px solid $lightGrey ;
                        @include maxOrientation(1024, portrait) {
                            margin-right: 0;
                            padding-right: 0;
                            border-right: none;
                            padding-bottom: 30px;
                            margin-bottom: 30px;
                            border-bottom: 1px solid $lightGrey;
                        }

                    }
                }

            }
        }
    }
}

@keyframes moveLeft {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}