@import './styles/<!--partnerName--settings-->';
@import './styles/tools';

.c-multi-filter {
    min-height: 41px;
}

    .c-multi-filter__plus-btn-container {
        position: relative;
        display: inline-block;
    }
        .c-multi-filter__plus-btn-container--none-selected {
            &::after {
                $lineHeight: 22px;
                content: attr(data-emptylabel);
                display: block;
                position: absolute;
                right: calc(-100% - 12px);
                top: 50%;
                transform: translateY(-50%);
                text-transform: uppercase;
                color: $grey-middle;
                font-size: 14px;
            }
        }
        .c-multi-filter__show-filters-btn {
            height: 41px;
            min-width: 42px;
            margin-right: 12px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            text-transform: uppercase;
            color: $grey-super-dark;
            font-size: 14px;
        }

            .c-multi-filter__show-filters-btn__eye-icon,
            .c-multi-filter__show-filters-btn__down-arrow-icon {
                height: 20px;
                width: 20px;
                margin-right: 1px;
                @include setSvgColor($grey-super-dark);
            }
            .c-multi-filter__show-filters-btn__eye-icon {
                margin-left: 8px;
            }

    .c-multi-filter__dropdown {
        position: absolute;
        top: calc(100% + 5px);
        left: calc(100% - 55px);
        background: $white-color;
        padding: 32px 32px 30px;
        width: 477px;
        z-index: $layer-5;
        box-shadow: 0 4px 60px 0 transparentize($black-color, 0.8);
    }

        .c-multi-filter__dropdown__arrow {
            @include css-arrow(
                $direction: 'up',
                $arrowSize: 24px,
                $backgroundColor: $white-color,
                $distanceAcross: 32px
            );
        }

        .c-multi-filter__dropdown__container {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: flex-start;
        }

        .c-multi-filter__dropdown__item {
            margin-top: 6px;
            margin-bottom: 6px;
        }

            .c-multi-filter__dropdown__item__text {
                display: inline-block;
                color: $grey-super-dark;
                font-weight: $font-weight-semi-bold;
                cursor: pointer;
                padding: 9px 14px;
                text-transform: uppercase;
                transition: background-color $default-animation-enter, color $default-animation-enter;

                &:hover {
                    border-radius: 30px;
                    background-color: transparentize($black-color, 0.9);
                    transition: background-color $default-animation-exit, color $default-animation-exit;
                }
            }

                .c-multi-filter__dropdown__item__text--selected {
                    color: transparentize($grey-super-dark, 0.85);
                    cursor: default;
                    &:hover {
                        background-color: transparent;
                    }
                }
        
    .c-multi-filter__selected-filter {
        background: $grey-middle;
        padding: 9px 39px 9px 14px;
        margin-right: 14px;
        border-radius: 30px;
        display: inline-block;
        position: relative;
        text-transform: uppercase;
    }

        .c-multi-filter__selected-filter--editable {
            background: transparentize($color: $black-color, $amount: 0.9);
            cursor: pointer;
        }

        .c-multi-filter__selected-filter__icon {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 14px;
        }