@import 'scss/styles.scss';

.user-icon {
    position: relative;
    width: fit-content;
    min-width: 26px;
    border-radius: 2px;
    padding: 4px;

    &.time-filter {
        .time-filter-arrow {
            svg {
                display: flex !important;

                path {
                    fill: $bw6-2 !important;
                }
            }
        }

        &:hover {
            .time-filter-title {
                color: $ta-black !important;
            }

            .time-filter-arrow {
                svg {
                    path {
                        fill: $ta-black !important;
                    }
                }
            }
        }
    }

    .time-filter-arrow {
        svg {
            display: flex !important;
        }

        &.rotate-arrow {
            rotate: 180deg;

            svg {
                path {
                    fill: $ta-white-3 !important;
                }
            }
        }
    }

    .main-icon-holder {
        gap: 4px;

        .filters-selected-value-holder {
            width: 14px;
            height: 14px;
            color: $white-2;
        }
    }

    &.default-filter-state {
        &:hover {
            background-color: $bw2;

            .main-icon-holder {
                svg-icon {
                    svg {
                        path {
                            fill: $ta-black !important;
                        }
                    }
                }
            }
        }

        .main-icon-holder {
            svg-icon {
                svg {
                    path {
                        fill: $muted !important;
                    }
                }
            }
        }
    }

    &.active-collapsible {
        background-color: $ta-black-2;
    }

    &.active-options {
        background-color: $ta-black;

        &:hover {
            .main-icon-holder {
                svg-icon {
                    svg {
                        path {
                            fill: $white-2 !important;
                        }
                    }
                }
            }
        }

        .main-icon-holder {
            svg-icon {
                svg {
                    path {
                        fill: $ca-white-2 !important;
                    }
                }
            }
        }

        .clear-filter {
            display: none !important;
        }

        &:hover {
            .main-icon-holder {
                svg-icon {
                    svg {
                        path {
                            fill: $white !important;
                        }
                    }
                }
            }
        }
    }

    &.filter-active-colors {
        background-color: $ta-blue-14;

        .main-icon-holder {
            svg-icon {
                svg {
                    path {
                        fill: $ta-blue-17 !important;
                    }
                }
                &:hover {
                    svg {
                        path {
                            fill: $white-2 !important;
                        }
                    }
                }
            }
        }

        &:hover {
            background-color: $ta-blue-15 !important;
            transition: 0.2s all;
        }
    }

    &.clear-colors {
        background: $ta-blue-14 !important;

        &:hover {
            background: $ta-blue-15 !important;
        }
    }
}

.filter-holder {
    position: relative;
    width: 260px;
    padding: 4px;
    border-radius: 3px;
    background-color: $ta-black-2;
    box-shadow: 0 0 4px $ta-border-grey;
    flex-direction: column;
    overflow: hidden;

    .filter-header {
        position: relative;
        width: 100%;
        padding-top: 2px;
        box-sizing: border-box;
        user-select: none;

        .user-filter-box {
            width: 18px;
            height: 18px;
            padding: 4px;

            border-radius: 60px;
            background-color: $ta-black;

            color: $white;
        }

        .user-title-text {
            color: $white-2;
            padding: 0px 4px;
            box-sizing: border-box;

            &.sort-text {
                border-radius: 1px;
                transition: background 0.2s ease-in-out;

                .sort-arrow {
                    transform: rotate(0deg);
                    transition: transform 0.2s;

                    &.rotate {
                        transform: rotate(180deg);
                    }
                }

                &:hover {
                    cursor: pointer;
                    background: $ta-black-3;
                }
            }
        }

        .search-icon-holder {
            position: absolute;
            width: 18px;
            height: 18px;
            width: 252px;
            top: 3px;
            right: 4px;
            cursor: pointer;
        }
    }

    .filter-body-holder {
        width: 100%;
    }

    .buttons-long {
        .buttons-holder {
            padding: 0px;
        }
        .button-clear {
            width: 144px !important;
        }

        .button-set {
            width: 144px !important;
        }
    }

    .buttons-holder {
        width: 100%;
        padding: 0px;
        box-sizing: border-box;
        user-select: none;

        .button-clear {
            width: 124px;
            height: 18px;
            border-radius: 1px;
            background-color: $ta-black;
            color: $bw5;
            text-transform: uppercase;

            &.active {
                cursor: pointer;
                color: $white;

                &:hover {
                    cursor: pointer;
                    background-color: $bw2;
                    color: $ta-black;
                }
            }
        }

        .button-set {
            width: 124px;
            height: 18px;
            border-radius: 1px;
            background-color: $ta-black;

            color: $bw5;
            text-transform: uppercase;

            &.active {
                background-color: $ta-blue-14;
                color: $white;
                cursor: pointer;

                &:hover {
                    cursor: pointer;
                    background-color: $ta-blue-16;
                    color: $ta-blue-15;
                }
            }
        }
    }
}

.money-filter {
    padding: 5px 6px 6px 6px;
    width: 300px;

    .button-clear {
        width: 142px !important;
    }

    .button-set {
        width: 142px !important;
    }
}

.location-filter {
    padding: 4px;
    width: 300px;
}