.tabs {
    display: flex;
    flex-direction: column;
    gap: 8px;

    @media (max-width: 1023px) {
        flex-direction: row;
    }
}

.tabs{
    /* overflow-x: auto;
    overflow-y: auto;
    width: 100%;
    transform: translateZ(0);
    scrollbar-width: thin; */
}

.tabs__item {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 11px 23px;
    gap: 10px;
    border-radius: 8px;
    cursor: pointer;
    background: var(--color-background-button);
    border: 1px solid transparent;
    white-space: nowrap;

    transition-property: border-color, backgroun-color;
    transition-duration: 0.3s, 0.3s;
    transition-timing-function: ease, ease;

    @media (max-width: 1023px) {
        border-radius: 38px;
        padding: 9px 15px;
    }

    & .tabs__item__text {
        line-height: 20px;
        font-size: 14px;
        color: var(--color-gray-500);

        transition-property: color;
        transition-duration: 0.3s;
        transition-timing-function: ease;
    }

    &.tabs__item_acitive {
        background: var(--color-orange);

        & .tabs__item__text {
            color: var(--color-white);
        }
    }

    &:not(.tabs__item_acitive):hover {
        border-color: var(--color-orange);
        background-color: var(--color-white);

        & .tabs__item__text {
            color: var(--color-orange);
        }
    }
}

/* SIDEBAR SMART FILTER */

.tabs__item.disabled,
.tabs__item.disabled:hover {
    background-color: var(--color-button-disabled-bg);
    border-color: transparent;
    cursor: not-allowed;

    & .tabs__item__text {
        color: var(--color-button-disabled-text);
    }
}