:root {
    --nb-slider-tabs-custom-tabs-gap: 0;
    --nb-slider-tabs-custom-tabs-mb: 16px;

    --nb-slider-tabs-custom-tab-fs: var(--nb-font-size-16);
    --nb-slider-tabs-custom-tab-fw: var(--nb-font-weight-400);
    --nb-slider-tabs-custom-tab-lh: var(--nb-body-line-height);

    --nb-slider-tabs-custom-tab-color: var(--nb-color-black);
    --nb-slider-tabs-custom-tab-border-color: var(--nb-color-black);
    --nb-slider-tabs-custom-tab-bg-color: var(--nb-color-white);
    --nb-slider-tabs-custom-tab-active-color: var(--nb-color-white);
    --nb-slider-tabs-custom-tab-active-bg-color: var(--nb-color-black);

    --nb-slider-tabs-custom-tab-py: 12px;
    --nb-slider-tabs-custom-tab-px: 24px;
}

.nb-slider-tabs-custom .nb-slider-tabs-custom-tabs {
    display: flex;
    gap: var(--nb-slider-tabs-custom-tabs-gap);
}

.nb-slider-tabs-custom .nb-slider-tabs-custom-tab {
    all: unset;
    font-size: var(--nb-slider-tabs-custom-tab-fs);
    font-weight: var(--nb-slider-tabs-custom-tab-fw);
    line-height: var(--nb-slider-tabs-custom-tab-lh);
    color: var(--nb-slider-tabs-custom-tab-color);
    background: var(--nb-slider-tabs-custom-tab-bg-color);
    padding: var(--nb-slider-tabs-custom-tab-py) var(--nb-slider-tabs-custom-tab-px);
    cursor: pointer;
    border: var(--nb-border-width) var(--nb-border-style) var(--nb-slider-tabs-custom-tab-border-color);
    margin-bottom: var(--nb-slider-tabs-custom-tabs-mb);
    transition: color 0.2s ease, background-color 0.2s ease;
}

.nb-slider-tabs-custom .nb-slider-tabs-custom-tab.is-active,
.nb-slider-tabs-custom .nb-slider-tabs-custom-tab:hover {
    color: var(--nb-slider-tabs-custom-tab-active-color);
    background: var(--nb-slider-tabs-custom-tab-active-bg-color);
}

@media (max-width: 767px) {
    .nb-slider-tabs-custom .nb-slider-tabs-custom-tabs {
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .nb-slider-tabs-custom .nb-slider-tabs-custom-tabs::-webkit-scrollbar {
        display: none;
    }

    .nb-slider-tabs-custom .nb-slider-tabs-custom-tab {
        white-space: nowrap;
        flex: 0 0 auto;
    }
}