#category-filter-form {
    gap: var(--space-4);
    width: 100%;
}

.category-filter-list {
    gap: var(--space-3);
    width: 100%;
}

.category-filter-item {
    width: 100%;
}

.category-group-option {
    gap: var(--space-3);
    width: 100%;
}

.category-group-list-container {
    padding-left: calc(var(--space-2) + 13px);
}

.category-option {
    align-items: start;
    gap: var(--space-2);
    width: 100%;
}

#category-filter-form-button-container {
    width: 100%;
}

#apply-category-filter-button {
    width: 100%;
    border: 1px solid var(--neutral-2);
    padding: var(--space-2) var(--space-3);
}

#open-mobile-filter-menu {
    display: none;
    border: 1px solid var(--neutral-2);
    padding: var(--space-2) var(--space-3);
}

@media (max-width: 1024px) {
    #open-mobile-filter-menu {
        display: flex;
    }

    #category-filter {
        position: relative;
        flex-direction: row;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 150;
        height: 100vh;
        width: calc(100vw / 3);
        padding: var(--size-2);
        background-color: var(--neutral-0);
        box-shadow: 0 0 var(--size-3) 0 var(--black-opacity-5);
        transform: translateX(-100%);
        transition: var(--time-4);
    }

    #category-filter[data-open="true"] {
        transform: translateX(0);
    }
}

@media (max-width: 768px) {
    #category-filter {
        width: calc(75vw);
    }
}