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

.productInfo {
    display: flex;
    gap: consts.$gap-medium;

    @include mixins.media('sm'){
        flex-direction: column;
    }
    & > .gallerySlider {
        display: flex;
        gap: consts.$gap-base;

        width: 650px;

        & > .thumbs {
            width: 100%;
            min-width: 80px;
            max-height: 540px;
            order: -1;
            .thumb-image {
                width: 80px;
                height: fit-content;
                max-height: 80px;

                &:not(:last-child) {
                    margin-bottom: consts.$gap-medium;
                }
            }
            @include mixins.media(md){
                order: unset;
            }
        }
        
        .baseGalery {
            width: 540px;
            
            .swiper-slide.image {
                
                display: flex;

                picture {
                    margin: 0 auto;
                }
            }

            @include mixins.media(lg){
                width: 384px;
            }
    
            @include mixins.media(md){
                width: 348px;
            }
    
            @include mixins.media(sm){
                width: 345px;
            }
        }

        .image {
            position: relative;
            overflow: hidden;

            &::after {
                @include mixins.circle-base();
                right: -40px;
            }
        }
        @include mixins.media(lg){
            width: 488px;
        }

        @include mixins.media(md){
            width: 448px;
            flex-direction: column;
        }

        @include mixins.media(sm){
            width: 100%;
        }
    }

    & > .content {
        display: flex;
        flex-direction: column;
        gap: consts.$gap-medium;

        & > .title {
            @include mixins.text('heading-5');
            color: consts.$schema-text-accent;
        }

        & > .detalis {
            display: flex;
            flex-direction: column;
            row-gap: consts.$gap-tiny;

            @include mixins.text('text-5');
            
            & > .text-accent {
                @include mixins.text('text-4');

            }
        }
        & > .viraintsAndOptions {
            display: flex;
            flex-direction: column;
            gap: consts.$gap-base;

            & > .block {
                display: flex;
                flex-direction: column;
                gap: consts.$gap-tiny;

                & > .title {
                    @include mixins.text('text-5-bold');
                    margin: 0;
                }

                & > .variantChoser {
                    display: flex;
                    align-items: center;
                    column-gap: 15px;
                    outline: 1px solid #E1DFDB;
                    padding: 4px;
                    width: fit-content;
                    cursor: pointer;

                    & > .variant {
                        display: flex;
                        column-gap: 15px;
                        align-items: center;


                        & >.image {
                            width: 60px;
                            height: 60px;
                        }

                        & > .name {
                            @include mixins.text('text-5');

                        }
                    }
                }
            }
    
        }
    

    & > .price {
        @include mixins.text('heading-5');
        
        &.--old{
            text-decoration: line-through;
        }
    }

    & > .buttons {
        display: flex;
        gap: consts.$gap-base;
        flex-wrap: wrap;

        @include mixins.media(md){
            flex-direction: column;
        }
        
        & > * {
            @include mixins.media(md){
                width: 100%;
            }
        }
    }
}

}