@use '../abstracts' as *;
/*----------------------------------------*/
/*  00. MODAL CSS START
/*----------------------------------------*/

.product{
    &__modal{
        max-width: 900px;
        padding: 20px;
        padding-top: 27px;
        &-close{
            top: 15px;
            right: 15px;
            z-index: 1;
            & button{
                color:$white;
                display: block;
                line-height: 36px;
                text-align: center;
                background: $t-yellow;
                width: 38px;
                height: 38px;
                @include border-radius(100%);
                border: 1px solid $t-yellow;
                outline: none;
                &:hover{
                    background: $white;
                    color: $black;
                }
            }
        }
        &-wrapper{
            padding: 20px;
        }
        &-content{
            & h4{
                font-size: 24px;
                font-weight: 500;
                text-transform: none;
                padding: 0;
                margin: 0;
                padding-right: 65px;
                margin-bottom: 15px;
            }
        }
        &-box{
            & .nav-tabs{
                border-bottom: 0;
            }
            & .nav-link{
                padding: 0;
                @include border-radius(0);
                border: none;
            }
        }
        &-links{
            & ul{
                & li{
                    display: inline-block;
                    margin-right: 4px;
                    & a{
                        display: block;
                        width: 45px;
                        height: 45px;
                        line-height: 45px;
                        background: $grey-4;
                        border: 1px solid $border;
                        @include border-radius(50%);
                        text-align: center;
                        &:hover{
                            color: $black;
                            background: $t-yellow;
                            border-color: $t-yellow;
                        }
                    }
                }
            }
        }
        & .nav-tabs{
            border: none;
            justify-content: space-between;
        }
        & .nav-item{
        }
        & .nav-link{
            border: 1px solid $border;
            position: relative;
            margin-bottom: 20px;
            &.active{
                border-color: $t-yellow;
                &::after{
                    position: absolute;
                    content: '';
                    top: -12px;
                    left: 50%;
                    @include transform(translateX(-50%));
                    border: 6px solid transparent;
                    border-top-color: transparent;
                    border-bottom-color: $t-yellow;
                }
            }
        }
    }
}