.ez-filters {
    transform: scaleY(1);
    transform-origin: top center;
    transition: all 0.2s $ibexa-admin-transition;
    flex-wrap: wrap;
    position: relative;

    &--collapsed {
        margin-top: calculateRem(10px);
        padding: 0;
        transform: scaleY(0);
        height: 0;
        opacity: 0;
    }

    &__row {
        padding: 0 0 calculateRem(32px);
        margin-bottom: calculateRem(32px);
        border-bottom: calculateRem(1px) solid $ibexa-color-base;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-column-gap: 5%;
        grid-row-gap: calculateRem(32px);
    }

    &__item {
        &-label {
            margin-bottom: calculateRem(16px);
            font-weight: 700;

            &--date-range {
                flex-basis: 45%;
            }
        }

        &--content-type {
            grid-column-start: 1;
            grid-column-end: -1;
        }

        &--subtree {
            grid-column-start: 2;
            grid-column-end: -1;
        }

        &--creator {
            position: relative;

            .ez-filters {
                &__input-wrapper {
                    position: relative;
                }

                &__input {
                    + .ez-icon {
                        display: none;
                    }

                    &:disabled {
                        cursor: auto;
                        background-color: $ibexa-white;
                        color: $ibexa-black;
                        padding-right: calculateRem(32px);
                        text-overflow: ellipsis;

                        & + .ez-icon {
                            display: block;
                            position: absolute;
                            bottom: calculateRem(7px);
                            right: calculateRem(6px);
                            cursor: pointer;
                        }
                    }
                }
            }
        }
    }

    &:before,
    &:after {
        content: '';
        position: absolute;
        right: calculateRem(40px);
        border-style: solid;
        border-width: 0 calculateRem(8px) calculateRem(8px);
        display: block;
        width: 0;
        z-index: 1;
    }

    &:before {
        border-color: $ibexa-white transparent;
        top: calculateRem(-8px);
    }

    &:after {
        border-color: $ibexa-white transparent;
        top: calculateRem(-8px);
    }

    &__btns {
        padding-top: calculateRem(16px);
        display: flex;

        .btn-secondary:not(:first-child) {
            margin-left: calculateRem(8px);
        }
    }

    &__option--hidden {
        display: none;
    }

    &__user-list {
        padding: 0;
        list-style: none;
        position: absolute;
        right: 0;
        min-width: 100%;
        border-radius: calculateRem(5px);
        margin-bottom: 0;
        background-color: $ibexa-color-base-light;
        max-height: calculateRem(300px);
        overflow: auto;
        transform: scaleY(1);
        transform-origin: top center;
        transition: transform 0.2s $ibexa-admin-transition;

        &--hidden {
            transform: scaleY(0);
        }
    }

    &__user-item {
        padding: calculateRem(8px) calculateRem(16px);
        cursor: pointer;
    }

    &__range-wrapper {
        height: 0;
        opacity: 0;
        margin-top: calculateRem(16px);
        background: $ibexa-white;
        border-radius: $ibexa-border-radius;
        transition: all 0.2s ease-in;
        pointer-events: none;

        &--visible {
            height: calculateRem(40px);
            opacity: 1;
            pointer-events: auto;
        }
    }

    &__range-select {
        outline: none;
    }
}
