#search-filter-desktop {
    display: inline-block;

    form {
        @apply m-0;
    }

    .item-toggle {
        position: relative;
        top: -5px;
    }

    .search-filter-category {
        @apply pb-6;

        &:not(:last-child) {
            @apply border-b-2 mb-6;
        }

        .search-filter-heading {
            @apply relative m-0 cursor-pointer;
            display: flex;
            justify-content: space-between;

            .heading {
                @apply m-0;
            }

            .search-filter-toggle {
                margin-left: 60px;
            }
        }

        .search-filter-desktop-items {
            @apply mt-4;

            .search-filter-desktop-item {
                @apply mb-2;

                display: flex;
                align-items: flex-start;

                .form-checkbox {
                    @apply inline-block;
                }

                .form-label {
                    @apply inline-block text-md relative cursor-pointer;
                    top: 1px;
                }

                margin-left: 0;

                .search-filter-small-copy {
                    @apply text-black-300;
                    margin-left: 12px;
                    font-size: 12px;
                }
            }

            .search-filter-icon {
                @apply text-black-500;

                margin-left: 20px;
            }

            .search-filter-icon-red {
                @apply text-red;

                margin-left: 20px;
            }
        }

        &:not([open]) {
            .icon-up {
                @apply hidden;
            }
        }

        &[open] {
            .icon-down {
                @apply hidden;
            }
        }
    }
}

#search-filter-mobile {
    /* @apply md:hidden; */
    @apply flex flex-col fixed w-screen h-screen top-0 bg-white;
    @apply transform-gpu transition-all;

    z-index: 9999;
    left: -100vw;

    &.opened {
        @apply left-0;
    }

    .search-filter-header {
        @apply flex items-center;
        @apply px-4 py-3;
        @apply text-lg text-white bg-red;
        flex: 0 0 auto;

        .text {
            @apply flex-1;
        }
    }

    .search-filter-categories {
        @apply flex-1;

        > li {
            @apply flex items-center;
            @apply px-4 py-3;
            @apply text-md border-gray-500 border-b-2;

            .text {
                @apply flex-1;
            }
        }
    }

    .search-filter-mobile-items {
        @apply hidden flex-1 flex-col;

        .search-filter-back {
            @apply flex items-center;
            @apply px-4 py-3;
            @apply text-md bg-gray-500 font-bold;
            flex: 0 0 auto;

            .icon {
                @apply mr-4;
            }
        }

        .search-filter-mobile-items-inner {
            @apply overflow-y-auto;
            flex: 1 1 0;

            .search-filter-mobile-item {
                @apply px-4 py-2;

                .form-checkbox {
                    @apply inline-block mr-2;
                }

                .form-label {
                    @apply inline-block text-md relative cursor-pointer;
                    top: 1px;
                }
            }
        }
    }

    .search-filter-button {
        @apply px-4 py-3 text-center;
        flex: 0 0 auto;
    }
}