@import 'theme/variables.scss';

.filter-dropdown {
    &-popover {
        width: 260px;
        position: relative;
        top: -4px;
        left: -4px;

        &-max-height {
            max-height: 360px;
        }
    }

    &-list {
        max-height: 260px;
        overflow-y: auto;

        &-icon {
            height: 26px;
            transition: background-color $transitionDuration;

            &-value {
                height: 14px;
                width: 14px;
            }

            &-remove {
                display: none;
            }

            &:hover {
                background-color: $ta-black;

                .filter-dropdown-icon-count {
                    display: none;
                }
            }

            &-selected {
                &:hover {
                    background-color: $blue-9;
                }
            }
        }

        &-item {
            &-icons {
                transition: opacity $transitionDuration;
                opacity: 0;
            }

            &-status-circle {
                height: 10px;
                width: 10px;
            }

            &-remove {
                display: none;
            }

            &:hover {
                background-color: $black;

                .filter-dropdown-list-item-icons {
                    opacity: 1;

                    svg path {
                        fill: var(--svg-fill-color, $ta-red-10);
                    }
                }
            }

            &-hover {
                &:hover {
                    .filter-dropdown-list-item-remove {
                        display: flex;

                        svg path {
                            fill: $ta-red-10 !important;
                        }
                    }

                    .filter-dropdown-list-item-count {
                        display: none !important;
                    }
                }
            }
        }
    }

    &-icon {
        height: 26px;
        width: 26px;
    }
    
    &-count {
        height: 14px;
        width: 14px;

        &-remove {
            display: none;
        }

        &-hover {
            &:hover {
                .filter-dropdown-count {
                    &-value {
                        display: none;
                    }
                    &-remove {
                        display: flex;
                    }
                }
            }
        }
    }

    &-button {
        height: 26px; 
    }

    &-footer {
        &-button {
            color: $bw-9;
            transition: color $transitionDuration, background-color $transitionDuration;

            &-set {
                color: $white-2;
                background-color: $ta-blue-14;

                &:hover {
                    background-color: $ta-blue-16;
                    color: $blue-9;
                }
            }
            &-clear {
                color: $bw-9;

                &:hover {
                    background-color: $grey-12;
                    color: $ta-black;
                }
            }

            height: 18px;
            width: 50%;
        }
    }
}

.filter-dropdown-list-badge {
    min-width: 18px;
}