.tabs__header {
    box-sizing: border-box;
    border: 1px solid var(--dark-40);
    border-radius: 999px
}

.tabs__header-inner {
    display: flex;
    align-items: stretch;
    padding: 3px
}

.tabs__header-item {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 10px 16px;
    border-radius: 50px;
    font-weight: 600;
    color: var(--dark-100);
    cursor: pointer;
    transition: background-color var(--trs-out);
    white-space: nowrap
}

.tabs__header-item:hover {
    background: var(--dark-20);
    transition: background-color var(--trs-in)
}

.tabs__header-item._active {
    cursor: default;
    background: var(--dark-100);
    color: var(--dark-10);
    pointer-events: none
}

.tabs__header--blue {
    border: 1px solid var(--dark-25)
}

.tabs__header--blue .tabs__header-item._active {
    background: var(--color-100)
}

@media (max-width: 768px) {
    .tabs__header-inner {
        overflow: auto
    }
    .tabs__header-inner::-webkit-scrollbar {
        display: none
    }
    .tabs__header {
        position: relative;
        overflow: hidden
    }
    .tabs__header:after {
        display: block;
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, #fff0 0% 70%, #fff);
        pointer-events: none
    }
    .tabs__header:has(.tabs__header-item._active:last-child):after {
        display: none
    }
    .tabs__header._no-shadow:after {
        content: none
    }
}