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

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

    .c-multi-filter__plus-btn-container {
        position: relative;
        float: left;
    }

        .c-multi-filter__show-filters-btn {
            height: 40px;
            width: 40px;
            border-color: $grey-dark;
            border-width: 2px;
            margin-right: 12px;

            &:hover {
                border-color: $accent-a;
            }
        }

            .c-multi-filter__show-filters-btn__icon {
                height: 20px;
                width: 20px;
                @include setSvgColor($grey-dark);
            }

    .c-multi-filter__show-text {
        padding-top: 11px;
        margin-right: 14px;
        float: left;
    }

    .c-multi-filter__dropdown {
        position: absolute;
        top: calc(100% + 18px);
        left: 0;
        background: $white-color;
        padding: 5px 34px 30px 34px;
        width: 483px;
        z-index: 10;
        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: 20px
            );
        }

        .c-multi-filter__dropdown__item {
            margin-top: 20px;
            width: 33%;
            display: inline-block;
            text-align: center;
        }

            .c-multi-filter__dropdown__item__text {
                display: inline;
                font-weight: $font-weight-semi-bold;
                border-bottom: 1px solid transparent;
                transition: border-color $default-animation-exit;
                cursor: pointer;
    
                &:hover {
                    border-color: $accent-a;
                    transition: border-color $default-animation-enter;
                }
            }
        
    .c-multi-filter__selected-filter {
        background: $grey-middle;
        padding: 9px 39px 9px 14px;
        margin-right: 14px;
        margin-bottom: 3px;
        border-radius: 30px;
        display: inline-block;
        position: relative;
    }

        .c-multi-filter__selected-filter--editable {
            background: $accent-a;
            cursor: pointer;
        }

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