@import 'scss/styles.scss';

.sort-dropdown-main-container {
    transition: background 0.2s ease-in-out;
    border-radius: 2px;

    .sort-column-name-container {
        .sort-column-name-text {
            color: $ta-black;
        }
    }

    .sort-arrows-container {
        transition: background 0.2s ease-in-out;
        border-radius: 2px;

        svg-icon {
            transition: transform 0.2s ease-in-out;

            svg {
                path {
                    transition: fill 0.2s ease-in-out;
                }
            }

            &.rotate-right {
                transform: rotate(270deg);
            }
        }

        .dropdown-arrow {
            svg path {
                fill: $white-4;
            }
        }

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

    &.onDarkBackground {
        .sort-arrows-container:hover {
            background-color: $ta-blue-21 !important;

            .direction-arrow svg path {
                fill: $blue-10 !important;
            }
        }
    }

    &:has(.sort-column-name-container:hover):not(.active) {
        background: $bw2;
        cursor: pointer;

        &.onDarkBackground {
            background: $ta-black !important;

            .sort-column-name-container .sort-column-name-text {
                color: $white-2 !important;
            }

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

            .sort-arrows-container {
                background: $ta-black !important;
            }
        }
    }

    &.onDarkBackground {
        .sort-column-name-container {
            .sort-column-name-text {
                color: $white-2 !important;
            }
        }
    }

    &.active {
        background: $ta-black !important;
        .sort-column-name-container .sort-column-name-text {
            color: $white;
        }

        .sort-arrows-container {
            background: $ta-black !important;
        }

        &.onDarkBackground {
            background: $bw-9 !important;

            .sort-column-name-container .sort-column-name-text {
                color: $ta-black-2 !important;
            }

            .sort-arrows-container {
                background: $bw-9 !important;

                svg path {
                    fill: $ta-black-2 !important;
                }
            }
        }
    }
}

.sort-popover {
    padding: 4px;
    background: $ta-black-2;
    border-radius: 3px;
    margin-block-start: -6px;

    &.small-variation {
        margin-left: 4px;
    }

    &-item {
        transition: background 0.2s ease-in-out;
        padding: 4px;
        border-radius: 2px;

        &-text {
            font-size: 14px;
            line-height: 18px;
            color: $white;
        }

        .check-icon-container {
            width: 14px;
            height: 14px;
            margin-right: 2px;

            .check-icon svg path {
                fill: $ta-blue-13;
            }
        }

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

        &.disabled {
            pointer-events: none;

            .sort-popover-item-text {
                color: $bw5;
            }
        }
    }
}

.ascending-icon {
    rotate: 180deg;
}