@import 'scss/styles.scss';

/* Types */

.dots-menu,
.menu-translate-unset {
    .dropdown-icon-container {
        &.active {
            .icon {
                transform: rotate(90deg);
            }
        }
    }
}

.menu-translate-unset {
    .dropdown-icon-container {
        &.active {
            padding-left: unset;
        }
    }

    .dropdown-container {
        transform: unset;
    }
}

/* Icon */

.dropdown-icon-container {
    width: 26px;
    height: 26px;
    border-radius: 2px;
    transition:
        background 0.2s ease-in,
        padding 0.2s ease-in;
    cursor: pointer;

    &:hover {
        background: $dark-2;

        .icon svg {
            path,
            circle {
                fill: $ta-black;
            }
        }
    }

    &.active {
        background: $ta-black;

        .icon {
            svg {
                path,
                circle {
                    fill: $bw-9;
                }
            }
        }
    }

    &.dark-background {
        .icon svg {
            path,
            circle {
                fill: $bw5;
            }
        }

        &:hover {
            background: $dark-3;

            .icon {
                svg {
                    path,
                    circle {
                        fill: $bw-9;
                    }
                }
            }
        }

        &.active {
            background: $bw-9;

            .icon svg {
                path,
                circle {
                    fill: $ta-black;
                }
            }
        }
    }

    .icon {
        position: relative;
        transition: transform 0.2s ease-in;

        svg {
            path,
            circle {
                transition: fill 0.2s ease-in;
                fill: $bw5;
            }
        }
    }
}

/* Dropdown */

.dropdown-container {
    min-width: 147px;
    padding: 4px;
    border-radius: 3px;

    background: $ta-black-2;
    max-height: 456px;
    overflow-y: auto;

    &::-webkit-scrollbar {
        width: 4px;
    }

    &::-webkit-scrollbar-track {
        background-color: $ta-black;
        border-radius: 0 3px 3px 0;
    }

    &::-webkit-scrollbar-thumb {
        background: $ta-black;
        border-left: 2px solid #919191;
        background-clip: padding-box;
        border-radius: 1px 3px 3px 1px;
    }

    &:has(.sticky-item) {
        padding: 0 4px 4px 4px;

        &::-webkit-scrollbar-track {
            margin-top: 34px;
        }
    }

    .dropdown-item {
        cursor: pointer;

        /* Sticky Item */

        &.sticky-item {
            position: sticky;
            top: 0;
            z-index: 10;
            background: $ta-black-2;
            padding-top: 4px;
        }

        /* Border */

        &.has-border {
            border-bottom: 1px solid $ta-black;
            margin-bottom: 4px;
        }

        /* Disabled */

        &.disabled {
            .dropdown-item-option {
                pointer-events: none !important;
                cursor: auto !important;

                p {
                    color: $bw5 !important;
                }

                .dropdown-item-option-icon {
                    svg path {
                        fill: $dark-3 !important;
                    }

                    &.delete svg path {
                        fill: $ta-red-20 !important;
                    }

                    &.activate svg path {
                        fill: $ta-blue-21 !important;
                    }

                    &.open-business svg path {
                        fill: $ta-green-5 !important;
                    }
                }
            }
        }

        &.checkbox-disabled {
            cursor: auto;
        }

        /* Icon Left */

        &.icon-left {
            .dropdown-item-option {
                .dropdown-item-option-icon {
                    order: 1;
                }

                p {
                    order: 2;
                    margin-right: 0;
                }
            }
        }

        /* Option */

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

            &:has(app-ca-checkbox) {
                padding: 0 !important;

                .dropdown-item-option-icon {
                    margin-right: 6px !important;
                }
            }

            &:hover {
                background: $ta-black;

                .dropdown-item-option-icon {
                    &.regular svg path {
                        fill: $ta-light-grey-6;
                    }

                    &.delete svg path {
                        fill: $ta-red-13;
                    }

                    &.activate svg path {
                        fill: $ta-blue-19;
                    }

                    &.open-business svg path {
                        fill: $ta-green-4;
                    }
                }
            }

            &-icon {
                svg {
                    width: 18px;
                    height: 18px;
                    path {
                        transition: fill 0.2s ease-in;
                    }
                }

                &.regular svg path {
                    fill: $muted;
                }

                &.delete svg path {
                    fill-opacity: 1;
                    fill: $ta-red-10;
                }

                &.activate svg path {
                    fill: $ta-blue-13;
                }

                &.open-business svg path {
                    fill: $ta-green;
                }
            }
        }

        /* Inner Dropdown */

        .inner-dropdown-item {
            &.active {
                background: $ta-black;
                border-radius: 2px;

                .dropdown-item-option {
                    &-icon {
                        transform: rotate(180deg);
                    }
                }

                .inner-dropdown-list {
                    max-height: fit-content !important;
                    padding: 4px !important;
                }
            }

            .dropdown-item-option {
                &-icon {
                    margin-right: 2px;
                    transition: transform 0.3s;

                    svg {
                        width: 16px !important;
                        height: 16px !important;
                    }
                }
            }

            .inner-dropdown-list {
                max-height: 0;
                overflow: hidden;
                transition:
                    max-height 0.2s,
                    padding 0.2s;

                .dropdown-item-option {
                    margin-bottom: 4px;
                    border-radius: 2px;

                    &:hover {
                        background: $dark-3;
                    }

                    &:last-of-type {
                        margin-bottom: 0;
                    }
                }
            }
        }
        @include prevent-text-selection();
    }
}