@use '../../utils' as *;


/*----------------------------------------*/
/*  8.3 Product css
/*----------------------------------------*/

.product{
    &__modal{
        
        & .modal-dialog{
            max-width: 1320px;
            border-radius: 0;

            @media #{$xl}{
                max-width: 1100px;
            }

            @media #{$lg}{
                max-width: 900px;
            }

            @media #{$md}{
                max-width: 700px;
            }
        }

        & .modal-content{
            padding: 40px;
            border-radius: 0;

            @media #{$xs}{
                padding: 20px;
            }
        }

        & .product__details-thumb-nav .nav-link{
            width: 90px;
            height: 90px;
            margin-bottom: 10px;
            & img{
                width: 100%;
            }

            @media #{$xs}{
                width: 70px;
                height: 70px;
            }
        }

        &-close{
            position: absolute;
            top: 20px;
            right: 20px;
            &-btn{
                display: inline-block;
                font-size: 16px;
                height: 44px;
                width: 44px;
                line-height: 44px;
                background-color: transparent;
                color: var(--tp-text-1);
                border-radius: 50%;
                &:hover{
                    color: var(--tp-theme-primary);
                    @include transform(rotate(90deg));
                }

                & svg{
                    @include transform(translateY(-2px));
                }
            }
        }
    }
}