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

/*----------------------------------------*/
/*  8.10 Product Card Style 2 CSS
/*----------------------------------------*/


.#{$theme-prifix}-product{
    $self: &;
    &-rating{
        &-icon{
            margin-right: 6px;
            display: flex;
            align-items: center;
            & span{
                color: var(--tp-yellow-3);
                font-size: 12px;
                &:not(:last-child){
                    margin-right: 2px;
                }
            }
        }
        &-text{
            & span{
                @extend %tp-ff-roboto;
                font-weight: 500;
                font-size: 12px;
            }
        }
    }
    &-countdown{
        &-inner{

            & ul{
                & li{
                    display: inline-block;
                    list-style: none;
                    @extend %tp-ff-roboto;
                    font-weight: 500;
                    font-size: 10px;
                    line-height: 1;
                    text-align: center;
                    text-transform: uppercase;
                    background-color: var(--tp-common-white);
                    border: 1px solid var(--tp-border-3);
                    border-radius: 5px;
                    width: 50px;
                    height: 50px;
                    padding-top: 8px;

                    &:not(:last-child){
                        margin-right: 3px;
                    }
                    & span{
                        display: block;
                        @extend %tp-ff-roboto;
                        font-weight: 700;
                        font-size: 20px;
                        line-height: 1;
                        text-align: center;
                        letter-spacing: -0.04em;
                        text-transform: uppercase;
                        color: var(--tp-common-black);
                    }
                }
            }
        }
    }
    &-item-2{
        &:hover{
            #{$self}{
                &-thumb-2{
                    & img{
                        @include transform(scale(1.1));
                    }
                }
                &-action-2{
                    left: 24px;
                    visibility: visible;
                    opacity: 1;
                }
            }
        }
    }
    &-title-2{
        font-weight: 400;
        font-size: 20px;
        margin-bottom: 2px;
        & a{
            &:hover{
                color: var(--tp-theme-secondary);
            }
        }
    }
    &-tag-2{
        & a{
            font-size: 16px;
            position: relative;
            display: inline-block;
            line-height: 1;
            &::after{
                position: absolute;
                content: '';
                left: auto;
                right: 0;
                bottom: 0;
                width: 0;
                height: 1px;
                background-color: var(--tp-theme-secondary);
                @extend %tp-transition;
            }

            &:hover{
                color: var(--tp-theme-secondary);
                &::after{
                    left: 0;
                    right: auto;
                    width: 100%;
                }
            }
        }
    }
    &-price{
        &-2{
            font-weight: 500;
            font-size: 16px;
            color: var(--tp-common-black);
            &.new-price{
                color: var(--tp-common-black);
            }
            &.old-price{
            font-weight: 400;
            font-size: 14px;
            text-decoration-line: line-through;
            color: var(--tp-text-1);
            }
        }
    }
    &-rating-icon-2{
        margin-bottom: 4px;
    }
    &-action{
        &-2{
            position: absolute;
            left: 0 ;
            top: 57px;
            right: auto;
            bottom: auto;
            z-index: 1;
            visibility: hidden;
            opacity: 0;
            @extend %tp-transition;

            @media #{$xs}{
                top: 30px;
            }
        }

        &-blackStyle{
            & #{$self}{
                &-action-btn-2{
                    &:hover{
                        background-color: var(--tp-common-black);
                    }
                }
            }
        }
        &-primaryStyle{
            & #{$self}{
                &-action-btn-3{
                    &:hover{
                        background-color: var(--tp-theme-primary);

                    }
                }
            }
        }

        &-btn-2{
            position: relative;
            display: inline-block;
            width: 42px;
            height: 42px;
            line-height: 42px;
            text-align: center;
            font-size: 18px;
            //color: var(--tp-common-black);
            //background-color: var(--tp-common-white);
            color: var(--tp-theme-primary);
            background-color: var(--tp-common-white);
            border-bottom: 0;
            box-shadow: 0px 1px 2px rgba(1, 15, 28, 0.2);
            border-radius: 50%;
            margin-bottom: 6px;

            & svg{
                @extend %tp-svg-y-1;
            }

            #{$self}{
                &-tooltip{
                   @extend %tp-ff-jost;
                }
            }

            &:hover{
                //color: var(--tp-common-white);
                //background-color: var(--tp-common-black);
                color: var(--tp-hover-color) !important;
                background-color: var(--tp-theme-primary) !important;

                #{$self}{
                    &-tooltip{
                        visibility: visible;
                        opacity: 1;
                        @include transform(translateX(8px) translateY(-50%));
                    }
                }

                &.active {
                    color: var(--tp-theme-primary) !important;
                    background-color: var(--tp-hover-color) !important;
                    //color: var(--tp-hover-color) !important;
                    //background-color: var(--tp-theme-primary) !important;
                }
            }
            &.active{
                color: var(--tp-hover-color) !important;
                background-color: var(--tp-theme-primary) !important;
                //color: var(--tp-theme-primary);
                //background-color: var(--tp-hover-color);
            }
        }
    }
    &-thumb-2{
        & img{
            @extend %tp-transition;
            width: 100%;
        }
    }
}