.plugin-facet-wrapper {

    @apply w-full;

    .facetwp-type-sort select,
    .facetwp-type-dropdown select,
    .fs-label-wrap,
    .facetwp-input-wrap input {
        @apply bg-gray-200 h-13 px-4 py-2 w-full border-2 border-primary-4 rounded-sm text-black text-base;
    }

    .facetwp-type-dropdown,
    .facetwp-type-sort {
        select {
            @apply appearance-none;
            background-image: var(--chevron);
            background-size: 1rem;
            background-position: right 1rem center;
            background-repeat: no-repeat;
        }
    }

    .fs-wrap {
        @apply w-full;
    }

    .fs-label-wrap {
        @apply flex items-center;
    }

    .fs-arrow {
        @apply bg-no-repeat bg-center bg-contain border-none w-4 h-4 absolute right-4 inset-y-0;
        background-image: var(--chevron);
    }

    .fs-wrap.multiple .fs-option .fs-checkbox i {
        @apply rounded-none w-4 h-4;
    }

    .fs-option, .fs-search, .fs-optgroup-label {
        @apply px-6 py-4;
    }

    .fs-wrap.multiple .fs-option.selected .fs-checkbox i {
        @apply bg-black;
    }

    .fs-dropdown {
        @apply border border-gray-500 border-t-0;
    }

    .fs-label-wrap .fs-label {
        @apply font-medium px-2 py-1;
    }

    .fs-options,
    .fs-search {
        @apply text-black;
    }

    .facetwp-input-wrap {
        @apply w-full relative;

        input {
            @apply font-normal;

            &::placeholder {
                @apply text-black/50;
            }
        }
    }

    .facetwp-type-search .facetwp-input-wrap{
        @apply flex gap-4 flex-row-reverse;
    }

    .facetwp-icon  {
        @apply btn cursor-pointer not-italic bg-primary-4 text-white inline-flex items-center;
    }

    .facetwp-icon:after {
        content:'Search';
        @apply inline-block;
    }

    .facetwp-icon:before {
        background-image: var(--search);
        @apply content-[''] inline-block bg-no-repeat bg-center bg-contain w-6 h-6;
    }

    .facetwp-checkbox,
    .facetwp-radio {
        @apply relative flex items-center font-semibold text-gray-600 gap-3 mb-6 cursor-pointer;

        &:before {
            @apply content-[''] box-content relative left-0 top-0 w-9 h-9 border-2 border-solid bg-gray-200 border-gray-500 rounded-sm;
        }

        &:after {
            @apply content-[''] box-content absolute left-1.5 top-1.5 w-7 h-7 bg-transparent scale-50 transition-all duration-200 rounded-xs;
        }

        &.checked:after {
            @apply scale-100 bg-gray-500;
        }

        .facetwp-counter {
            @apply hidden;
        }

        &.disabled {
            @apply opacity-50 cursor-not-allowed;
        }

        &:last-child {
            @apply mb-0;
        }
    }

    .facetwp-radio {
        &:before {
            @apply rounded-full;
        }

        &:after {
            @apply rounded-full;
        }
    }
}

.facetwp-pager {
    @apply flex items-center justify-center gap-4;

    .facetwp-page {

        &:not(.dots) {
            @apply btn cursor-pointer hover:bg-primary-4 hover:text-primary-1;
        }

        &.dots {
            @apply font-semibold text-primary-4;
        }

        &.active {
            @apply bg-primary-4 text-primary-1;
        }

        &.next {
            @apply bg-primary-4 text-primary-1 hover:bg-transparent hover:text-primary-4;
        }

        &.prev {
            @apply hover:bg-primary-4 hover:text-primary-1;
            &:hover {
                svg {
                    @apply translate-x-[-5px];
                }
            }
        }

        &:not(.next, .prev) {
            @apply hidden md:inline-flex;
        }
    }
}

.plugin-gravity-wrapper {

    [type=text], 
    input:where(:not([type])),
    [type=email],
    [type=url],
    [type=password],
    [type=number],
    [type=date],
    [type=datetime-local],
    [type=month],
    [type=search],
    [type=tel],
    [type=time],
    [type=week],
    [multiple],
    textarea,
    select {
        @apply border-2 border-gray-500;
    }

}


#breadcrumbs>span>span:not(:nth-last-of-type(3)) {
    @apply hidden lg:inline;
}