.filter {
    overflow-x: auto
}

.filter::-webkit-scrollbar {
    display: none
}

.filter .filter-content {
    max-width: 1360px
}

.filter .filter-content .filter-items-wrapper {
    display: flex;
    overflow-x: auto;
    align-items: center
}

.filter .filter-content .filter-items-wrapper::-webkit-scrollbar {
    display: none
}

.filter .filter-content .filter-items-wrapper:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: linear-gradient(to right, var(--primary-1) 0%, var(--opacity-2) 2%), linear-gradient(to left, var(--primary-1) 0%, var(--opacity-2) 10%);
    pointer-events: none
}

.filter .filter-content .filter-items-wrapper .filter-item {
    display: none;
    font-size: 12px;
    color: var(--primary-9);
    white-space: nowrap;
    cursor: pointer;
    margin-right: var(--spacing-16)
}

@media(min-width: 767.5px) {
    .filter .filter-content .filter-items-wrapper .filter-item {
        font-size: 14px
    }
}

@media(min-width: 1023.5px) {
    .filter .filter-content .filter-items-wrapper .filter-item {
        margin-right: var(--spacing-24)
    }
}

.filter .filter-content .filter-items-wrapper .filter-item:first-child {
    margin-left: var(--spacing-16)
}

@media(min-width: 1023.5px) {
    .filter .filter-content .filter-items-wrapper .filter-item:first-child {
        margin-left: var(--spacing-24)
    }
}

.filter .filter-content .filter-items-wrapper .filter-item:hover {
    color: var(--secondary-3)
}

.filter .filter-content .filter-items-wrapper .filter-item.active {
    color: var(--secondary-3) !important
}

.filter .filter-content .filter-items-wrapper .filter-item.loaded {
    display: flex
}