@import '../../../../../css/src/general/mixin.scss';

.zypento-blocks-woocommerce-collection{
    width: 100%;
    max-width: none !important;
    padding: var(--wp--preset--spacing--40);
    box-sizing: border-box;
    & *{
        box-sizing: border-box;
    }
}
.zypento-blocks-woocommerce-collection-title{
    position: relative;
    padding: 0 0 1em 0;
    @media screen and (min-width : 1201px) {
        padding: 0 30% 1em 0;
    }
    &>h2{
        margin: 0 0 1.0em 0;
        @media screen and (min-width : 1201px) {
            margin: 0;
            font-size: var(--wp--preset--font-size--xx-large);
        }
    }
    &>p{
        font-size: 1.0em;
        margin: 0 0 0.5em 0;
    }
    &>a{
        border: 1px solid var(--wp--preset--color--contrast);
        border-radius: 2em;
        padding: 0.3em 2em;
        color: var(--wp--preset--color--contrast);
        text-decoration: none;
        @media screen and (min-width : 1201px) {
            position: absolute;
            top: 50%;
            right: 0;
            margin: -1em 0 0 0;
        }
    }
}
.zypento-blocks-woocommerce-collection-one-selector{
    border-top: 1px solid var(--wp--preset--color--base-4);
    border-bottom: 1px solid var(--wp--preset--color--base-4);
    padding: var(--wp--preset--spacing--20) 0;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 0.5em 0;
    @media screen and (min-width : 1201px) {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 0 1em;
    }
    &>span{
        border: 1px solid var(--wp--preset--color--contrast);
        border-radius: 2em;
        padding: 0.3em 2em;
        color: var(--wp--preset--color--contrast);
        text-decoration: none;
        font-size: 0.9rem;
        font-weight: 800;
        cursor: pointer;
        &[data-type="active"]{
            background: var(--wp--preset--color--contrast);
            color: var(--wp--preset--color--base);
            cursor: default;
        }
        @media screen and (max-width : 1200px) {
            text-align: center;
        }
        &:hover{
            background: var(--wp--preset--color--contrast);
            color: var(--wp--preset--color--base);
        }
    }
}
.zypento-blocks-woocommerce-collection-content{
    padding: var(--wp--preset--spacing--40) 0;
}
.zypento-blocks-woocommerce-collection-link{
    border-top: 1px solid var(--wp--preset--color--base-3);
    padding: var(--wp--preset--spacing--40) 0 0 0;
    text-align: center;
    &>a{
        border: 1px solid var(--wp--preset--color--contrast);
        border-radius: 2em;
        padding: 0.3em 2em;
        color: var(--wp--preset--color--contrast);
        text-decoration: none;
    }
}

.zypento-blocks-woocommerce-collection-one-tab{
    display: none;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--20);
    &[data-type="active"]{
        display: flex;
    }
    @media screen and (max-width : 781px) {
        flex-direction: column;
        flex-grow: 1;
        gap: var(--wp--preset--spacing--20) 0;
    }
    @media screen and (min-width : 782px) and (max-width : 1200px) {
        flex-direction: column;
        flex-grow: 1;
    }
    & .zypento-blocks-woocommerce-collection-one-item{
        position: relative;
        background: var(--wp--preset--color--base-3);
        flex-basis: calc(25% - var(--wp--preset--spacing--20));
        @media screen and (max-width : 781px) {
            flex-basis: 100%;
        }
        @media screen and (min-width : 782px) and (max-width : 1200px) {
            flex-basis: calc(50% - var(--wp--preset--spacing--20));
        }
        & .zypento-woo-media-sale{
            padding: 0.4em 1.0em;
            border-radius: 4px;
            background: var(--wp--preset--color--accent);
            color: var(--wp--preset--color--base);
            position: absolute;
            top: 1.0em;
            left: 1.0em;
            font-size: 0.9rem;
            z-index: 1;
        }
        & .zypento-woo-media-actions{
            width: 40px;
            min-height: 60px;
            background: var(--wp--preset--color--base);
            z-index: 2;
            position: absolute;
            top: 1.0em;
            right: 1.0em;
            margin-right: -30px;
            opacity: 0;
            transition: margin-right 0.4s cubic-bezier(.4,0,.2,1), opacity 0.4s cubic-bezier(.4,0,.2,1);
            box-shadow: 1px 0 0 0 var(--wp--preset--color--base-5);
            border-radius: 4px;
            border: none;
        }
        &:hover .zypento-woo-media-actions{
            margin-right: 0;
            opacity: 1;
            transition: margin-right 0.4s cubic-bezier(.4,0,.2,1), opacity 0.4s cubic-bezier(.4,0,.2,1);
        }
        & .zypento-woo-media{
            position: relative;
            overflow: hidden;
            & img{
                max-width: 100%;
                height: auto;
                transition:transform 0.4s cubic-bezier(.4,0,.2,1);
                &:hover{
                    transform: scale(1.2);
                    transition:transform 0.4s cubic-bezier(.4,0,.2,1);
                }
            }
        }
        & .zypento-woo-content{
            padding: 1em;
            & .zypento-woo-name{
                margin: 0;
            }
            & .zypento-woo-stars{
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                gap: 0 5px;
                padding: 10px 0;
                &>span{
                    width: 20px;
                    height: 20px;
                    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20px' height='20px' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M14.43 10L12 2l-2.43 8H2l6.18 4.41L5.83 22L12 17.31L18.18 22l-2.35-7.59L22 10z'/%3E%3C/svg%3E") center no-repeat;
                }
            }
            & .zypento-woo-price{
                & .zypento-woo-price-sale{
                    font-size: 1rem;
                    margin: 0;
                    padding: 5px 0;
                    & .zypento-woo-price{
                        color: var(--wp--preset--color--contrast-3);
                        text-decoration: line-through;
                    }
                    & .zypento-woo-sale{
                        color: var(--wp--preset--color--accent-2);
                        font-weight: 800;
                    }
                }
            }
            & .zypento-woo-cart{
                position: relative;
                padding: 10px 20px;
                background: var(--wp--preset--color--accent-7);
                color: var(--wp--preset--color--contrast);
                display: flex;
                gap: 0 1em !important;
                align-items: center;
                & .zypento-woo-cart-quantity{
                    display: block;
                    position: relative;
                    width: 100px;
                    min-height: 20px;
                    padding: 0 30px;
                    background: rgba($color: #000000, $alpha: 0.05);
                    & .zypento-decrement{
                        width: 30px;
                        height: 100%;
                        position: absolute;
                        top: 0;
                        left: 0;
                        cursor: pointer;
                        &::after{
                            content: '';
                            position: absolute;
                            top: 50%;
                            left: 5px;
                            margin-top: -10px;
                            width: 20px;
                            height: 20px;
                            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20px' height='20px' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M19 12.998H5v-2h14z'/%3E%3C/svg%3E") center no-repeat;
                        }
                        
                    }
                    & .zypento-input{
                        width: 40px;
                        display: block;
                        text-align: center;
                    }
                    & .zypento-increment{
                        width: 30px;
                        height: 100%;
                        position: absolute;
                        top: 0;
                        right: 0;
                        cursor: pointer;
                        &::after{
                            content: '';
                            position: absolute;
                            top: 50%;
                            margin-top: -10px;
                            width: 20px;
                            height: 20px;
                            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20px' height='20px' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M19 12.998h-6v6h-2v-6H5v-2h6v-6h2v6h6z'/%3E%3C/svg%3E") center no-repeat;
                        }
                        
                    }
                }
                & .zypento-woo-cart-add{
                    font-size: 1rem;
                    font-weight: 800;
                    text-transform: uppercase;
                    padding: 0.5em 2em;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    cursor: pointer;
                    border-radius: 2em;
                    background: var(--wp--preset--color--contrast);
                    color: var(--wp--preset--color--base);
                    &[data-type="disabled"]{
                        opacity: 0.3;
                    }
                }
                & .zypento-woo-cart-add-success{
                    position: absolute;
                    top: 50%;
                    right: 20px;
                    margin: -15px 0 0 0;
                    width: 30px;
                    height: 30px;
                    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30px' height='30px' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M17 3.34a10 10 0 1 1-14.995 8.984L2 12l.005-.324A10 10 0 0 1 17 3.34m-1.293 5.953a1 1 0 0 0-1.32-.083l-.094.083L11 12.585l-1.293-1.292l-.094-.083a1 1 0 0 0-1.403 1.403l.083.094l2 2l.094.083a1 1 0 0 0 1.226 0l.094-.083l4-4l.083-.094a1 1 0 0 0-.083-1.32'/%3E%3C/svg%3E") center no-repeat;
                    &[data-type="hidden"]{
                        display: none;
                    }
                }
                & .zypento-woo-cart-add-error{
                    position: absolute;
                    top: 50%;
                    right: 20px;
                    margin: -15px 0 0 0;
                    width: 30px;
                    height: 30px;
                    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30px' height='30px' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 1.67c.955 0 1.845.467 2.39 1.247l.105.16l8.114 13.548a2.914 2.914 0 0 1-2.307 4.363l-.195.008H3.882a2.914 2.914 0 0 1-2.582-4.2l.099-.185l8.11-13.538A2.91 2.91 0 0 1 12 1.67M12.01 15l-.127.007a1 1 0 0 0 0 1.986L12 17l.127-.007a1 1 0 0 0 0-1.986zM12 8a1 1 0 0 0-.993.883L11 9v4l.007.117a1 1 0 0 0 1.986 0L13 13V9l-.007-.117A1 1 0 0 0 12 8'/%3E%3C/svg%3E") center no-repeat;
                    &[data-type="hidden"]{
                        display: none;
                    }
                }
                & .zypento-woo-cart-add-processing{
                    position: absolute;
                    top: 50%;
                    right: 20px;
                    margin: -12px 0 0 0;
                    width: 24px;
                    height: 24px;
                    @include zypento-blocks-spinner(24px, #757474, #000000, 3px);
                    &[data-type="hidden"]{
                        display: none;
                    }
                }
                & .zypento-woo-cart-options{
                    width: 100%;
                    font-size: 1rem;
                    font-weight: 800;
                    text-transform: uppercase;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    cursor: pointer;
                    text-decoration: none;
                    color: var(--wp--preset--color--base);
                    &:hover{
                        color: var(--wp--preset--color--base-4);
                    }
                    &:visited{
                        color: var(--wp--preset--color--base);
                    }
                }
            }
            & .zypento-woo-sku{
                padding: 5px 0 0 0;
                &>span{
                    font-weight: 800;
                }
            }
        }
    }
}