@use 'mixins' as *;

@keyframes dropdown-slide-down {
    from {
        opacity: 0;
        transform: translateY(-0.5rem) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes dropdown-slide-up {
    from {
        opacity: 0;
        transform: translateY(0.5rem) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.dropdown {
    position: relative;

    .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        display: none;
        background-color: hsl(var(--popover));
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
        border-width: 1px;
        color: hsl(var(--popover-foreground));
        border-radius: calc(var(--radius) - 2px);
        min-width: 8rem;
        width: 14rem;
        padding: .25rem;
        z-index: 50;
        transform-origin: top center;
        pointer-events: none;
        opacity: 0;

        &.top {
            top: auto;
            bottom: 100%;
            transform-origin: bottom center;
        }

        &.right {
            left: auto;
            right: 0;
            transform-origin: top right;
        }

        &.show {
            display: block;
            pointer-events: all;
            opacity: 1;
            animation: dropdown-slide-down 200ms ease-out forwards;

            &.top {
                animation: dropdown-slide-up 200ms ease-out forwards;
            }
        }

        .dropdown-separator {
            margin-inline: calc(var(--spacing) * -1);
            margin-block: calc(var(--spacing) * 1);
            border-color: hsl(var(--border));
            height: 0;
            color: inherit;
            border-top-width: 1px;
            opacity: 1;
        }

        a,
        button {
            display: flex;
            width: 100%;
            font-size: .875rem;
            line-height: 1.25rem;
            padding: .375rem .5rem;
            border-radius: calc(var(--radius) - 4px);
            gap: .5rem;
            align-items: center;
            cursor: pointer;
            text-decoration: none;

            &:hover {
                color: hsl(var(--accent-foreground));
                background-color: hsl(var(--accent));
                @include transitionColors();
            }

            &:disabled,
            &.disabled {
                opacity: 0.5;
                pointer-events: none;
            }
        }
    }
}