@use '../consts.scss' as consts;
@use '../mixins.scss' as mixins;

.indexSliderBlock {
    background-color: consts.$schema-accent-background;
    padding-bottom: var(--blocks-space);
    overflow: hidden;
    & > .container > .heading {
        --color-heading: #{consts.$schema-text};
        padding: consts.$gap-large 0;
    }

    .swiper-container[withNavigation] {
        overflow: unset;
        .swiper-button-prev, .swiper-button-next {
            color: #{consts.$schema-text};
            
            @include mixins.media(sm){
                left: inherit;
                right: inherit;
            }
        }

        .swiper-button-prev {
            left: -30px;
        }
        .swiper-button-next {
            right: -30px;
        }
        .swiper-slide:not(.swiper-slide-active){
            opacity: 20%;
        }
    }
    .slideImage {
        position: relative;
        width: 1330px;
        height: 748px;

        @include mixins.media(lg){
            width: 1000px;
            height: 561px;
        }
        
        @include mixins.media(md){
            width: 720px;
            height: 404px;
        }

        @include mixins.media(sm){
            width: 376px;
            height: 211px;
        }

        & > .image {
            position: absolute;
            z-index: 0;
            inset: 0;
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    
        & > .circles {
            $circle-size: 80px;
            z-index: 2;

            &::after, &::before {
                @include mixins.circle-base($circle-size);
                background-color: consts.$schema-accent-background;

            }
            
            &::before { 
                left: calc(($circle-size/2) * -1);
            }
            &::after {
                right: calc(($circle-size/2) * -1);
            }
        }

    }
}