.tns-outer {
    direction: ltr;
    .tns-nav, button {
        display: none;
    }
}

.slider-content {
    direction: ltr;
    overflow: hidden;

    .item {

    }
}





.tns-inner{
    overflow: hidden;
}

a, a:visited {
    text-decoration: none;
    color: var(--xshop-primary);

    &:hover {
        color: var(--xshop-secondary);
    }
}

.btn {
    border-radius: var(--xshop-border-radius);
    font-family: VazirXUI, sans-serif;
}

.btn-primary {
    background: var(--xshop-primary);
    border-color: var(--xshop-primary);
    color: var(--xshop-diff) !important;

    &:hover {
        border-color: var(--xshop-primary);
        background: var(--xshop-secondary);;
    }
}

.btn-outline-primary {
    border-color: var(--xshop-primary);
    color: var(--xshop-primary);

    &:hover {
        border-color: var(--xshop-secondary);
        color: var(--xshop-diff2) !important;
        background: var(--xshop-secondary);;
    }
}

.btn-secondary {
    background: var(--xshop-secondary);
    border-color: var(--xshop-secondary);
    color: var(--xshop-diff2) !important;

    &:hover {
        border-color: var(--xshop-primary);
        background: var(--xshop-secondary);;
    }
}

.btn-outline-secondary {
    border-color: var(--xshop-secondary);
    color: var(--xshop-secondary);

    &:hover {
        border-color: var(--xshop-primary);
        color: var(--xshop-diff) !important;
        background: var(--xshop-primary);;
    }
}

.btn-outline-invert {
    border-color: var(--xshop-diff);
    color: var(--xshop-diff);

    &:hover {
        background: var(--xshop-diff);
        color: var(--xshop-primary);
    }
}

a.btn-outline-light {
    color: white;
}

a.btn-outline-dark {
    color: black;
}

ul.pagination {
    justify-content: center;
    margin: 2rem 0;

    .page-item{
        .page-link{
            color: var(--xshop-primary);

            &:hover{
                background: var(--xshop-secondary);
                color: var(--xshop-diff2);
            }
        }
    }
    .page-item.active {
        .page-link {
            background: var(--xshop-primary);
            border-color: transparent;
            color: var(--xshop-diff);
        }

    }
}

.form-check-input:checked{
    background-color: var(--xshop-primary);
    border-right-color: var(--xshop-secondary);
}

.modal.lightbox{
    backdrop-filter: blur(7px);
    .ratio{
        background: #33333355 !important;
        border-radius: var(--xshop-border-radius);
        overflow: hidden;
    }
}


.custom-tooltip {
    --bs-tooltip-bg: var(--xshop-primary);
    --bs-tooltip-color: var(--xshop-diff);
}


.accordion-button:not(.collapsed){
    background: transparent;
}

.btn-outline-light:hover{
    color: black !important;
}