@use "../01-base/breakpoints" as *;
@use "../01-base/colors" as *;
@use "../02-abstracts/mixins" as *;

.hero-slider{
    @include responsive(small-phones){
        height: 100%;
    }
    height: 90vh;
    width: 100%;
    @include responsive(desktop){
        height: inherit;
        width: inherit;
    }
    .swiper-wrapper{
        position: relative;
        overflow: hidden;
        }
        .swiper-slide{
            height: 100%;
            width: 100%!important;
            opacity: 0!important;
            padding: 20px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            gap: 20px;
            padding-bottom: 90px;
            background-repeat: no-repeat;
            background-size: cover!important;
            background-position: center;
            @include responsive(desktop){
                flex-direction: row;
                justify-content: space-between;
                align-items: flex-end;
                min-height: 780px;
                padding: 102px;
                width: 100%;
            }
                .hero-slider-heading{
                    z-index: 99;
                    @include responsive(tablet){
                        max-width: 70%;
                        align-self: flex-end;
                    }
                    @include responsive(desktop){
                        max-width: inherit;
                        flex: 0 0 50%;
                    }
                }
                .hero-slider-content{
                    z-index: 99;
                    padding: 20px;
                    @include responsive(tablet){
                        max-width: 70%;
                        align-self: flex-end;
                    }
                    @include responsive(desktop){
                        max-width: inherit;
                        align-self: inherit;
                        flex: 0 0 50%;
                        padding: 50px 28px 64px 42px;
                    }
                }
                &-active{
                    opacity: 1!important;
                    background-repeat: no-repeat;
                    background-size: cover;
                    background-position: center;
                }
            .bg-filter{
                @include bg-filter;
                @include bg-filter--gradient;
            }
        }
        .swiper-nav{
            width: 110px;
            height: 50px;
            position: absolute;
            display: flex;
            align-items: initial;
            gap: 10px;
            bottom: 20px;
            right: 65px;
            @include responsive(tablet){
                right: 100px;
            }
            @include responsive(desktop){
                right: 102px;
                bottom: 42px;
            }
            .swiper-button{
                display: block;
                background-color: $dark-color;
                height: 50px;
                width: 50px;
                padding: 12px;
                content: url("./images/arrow-right.png");
                position: relative;
                &-prev{
                    transform: rotate(180deg);
                    left: 0;
                }
                &-next{
                    right: 0;
                }
            }
        }
}