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

/*----------------------------------------*/
/*  8.24 Deal CSS
/*----------------------------------------*/


.#{$theme-prifix}-deal{
    &-title{
        font-weight: 500;
        font-size: 60px;
        line-height: 1.17;
        margin-bottom: 35px;

        @media #{$xs}{
            font-size: 45px;
        }

        &-pre{
            font-weight: 400;
            font-size: 18px;        
            color: var(--tp-theme-green);
            position: relative;
            z-index: 1;
            display: inline-block;
            margin-bottom: 7px;
            & svg{
                position: absolute;
                bottom: -8px;
                left: 26px;
                z-index: -1;
            }
        }
    }
    &-countdown{
        & .tp-product-countdown-inner{
            & ul{
                & li{
                    padding-top: 13px;
                    width: 76px;
                    height: 80px;
                    font-weight: 400;
                    font-size: 15px;
                    color: var(--tp-text-2);
                    text-transform: capitalize;
                    box-shadow: 0px 1px 2px rgba(1, 15, 28, 0.1);
                    border-radius: 8px;
                    position: relative;
                    border: none;

                    @media #{$xs}{
                        margin-bottom: 15px;
                    }

                    & span{
                        font-weight: 500;
                        font-size: 34px;
                        letter-spacing: -0.04em;
                        color: var(--tp-theme-green);
                    }

                    &:not(:last-child){
                        margin-right: 13px;
                        &::after,
                        &::before{
                            position: absolute;
                            content: '';
                            right: -10px;
                            top: 28px;
                            width: 5px;
                            height: 5px;
                            border-radius: 50%;
                            background-color: rgba($color: $black, $alpha: .2);
                        }
                        &::before{
                            top: 42px;
                        }
                        
                    }
                }
            }
        }
    }
    &-shape{
        &-1{
            position: absolute;
            top: 8%;
            left: 0;
            z-index: -1;
        }
        &-2{
            position: absolute;
            top: 10%;
            left: 2%;
            z-index: -1;

            @media #{$xl}{
                left: -12%;
            }
            @media #{$lg}{
                left: -16%;
            }
            @media #{$md}{
                top: -4%;
                left: -32%;
            }
            @media #{$sm}{
                left: -47%;
            }
            @media #{$xs}{
                left: -100%;
            }
        }
        &-3{
            position: absolute;
            top: 29%;
            right: 6%;
            z-index: -1;
        }
        &-4{
            position: absolute;
            top: 11%;
            right: 5%;
            z-index: -1;

            @media #{$xl}{
                right: -10%;
            }

            @media #{$lg}{
                right: -16%;
            }
            @media #{$md}{
                right: -38%;
            }
            @media #{$sm}{
                right: -49%;
            }
            @media #{$xs}{
                right: -111%;
            }
        }
        &-5{
            position: absolute;
            top: 3%;
            right: 28%;
            z-index: -1;
        }
        &-6{
            position: absolute;
            bottom: 0;
            left: 35%;
            z-index: -1;
        }
        &-7{
            position: absolute;
            top: 10%;
            left: 50%;
            @include transform(translateX(-50%));
            z-index: -1;
        }
    }
}