.dropdown-container {
    --item-height: 40px;
    --visible-items: 5;
    --max-list-height: calc(var(--item-height) * var(--visible-items) + 12px); /* 12px for py-1.5 padding */
}

.dropdown-trigger {
    transition: background-color 150ms ease, box-shadow 150ms ease;
}

    .dropdown-trigger svg[data-dropdown-icon] {
        transition: transform 200ms ease;
    }

.dropdown-container.is-open .dropdown-trigger svg[data-dropdown-icon] {
    transform: rotate(180deg);
}

.dropdown-menu {
    transform-origin: top left;
    opacity: 0;
    transform: scale(0.95) translateY(-8px);
    pointer-events: none;
    visibility: hidden;
    transition: opacity 150ms ease, transform 150ms ease, visibility 0ms linear 150ms;
}

.dropdown-container.is-open .dropdown-menu {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
    visibility: visible;
    transition: opacity 180ms ease, transform 180ms ease, visibility 0ms linear 0ms;
}

.dropdown-list {
    max-height: var(--max-list-height);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

    .dropdown-list::-webkit-scrollbar {
        width: 6px;
    }

    .dropdown-list::-webkit-scrollbar-track {
        background: transparent;
        margin: 4px 0;
    }

    .dropdown-list::-webkit-scrollbar-thumb {
        background-color: rgba(var(--inactive-dark), 0.4);
        border-radius: 3px;
    }

        .dropdown-list::-webkit-scrollbar-thumb:hover {
            background-color: rgba(var(--inactive-dark), 0.6);
        }

.dropdown-item {
    opacity: 0;
    transform: translateY(-6px);
}

    .dropdown-item a {
        min-height: var(--item-height);
        transition: background-color 120ms ease, transform 120ms ease;
    }

        .dropdown-item a:hover {
            transform: translateX(2px);
        }

        .dropdown-item a:focus {
            outline: none;
            background-color: rgba(var(--selected-item), 0.5);
        }

        .dropdown-item a:focus-visible {
            box-shadow: inset 0 0 0 2px rgba(var(--selected-item), 0.5);
        }

.external-icon {
    transition: opacity 150ms ease;
}

.dropdown-container.is-open .dropdown-item {
    animation: dropdownItemIn 180ms ease forwards;
}

.dropdown-item[data-index="0"] {
    animation-delay: 0ms;
}

.dropdown-item[data-index="1"] {
    animation-delay: 20ms;
}

.dropdown-item[data-index="2"] {
    animation-delay: 40ms;
}

.dropdown-item[data-index="3"] {
    animation-delay: 60ms;
}

.dropdown-item[data-index="4"] {
    animation-delay: 80ms;
}

.dropdown-item[data-index="5"] {
    animation-delay: 100ms;
}

.dropdown-item[data-index="6"] {
    animation-delay: 120ms;
}

.dropdown-item[data-index="7"] {
    animation-delay: 140ms;
}

.dropdown-item[data-index="8"] {
    animation-delay: 160ms;
}

.dropdown-item[data-index="9"] {
    animation-delay: 180ms;
}
.dropdown-item[data-index="10"],
.dropdown-item[data-index="11"],
.dropdown-item[data-index="12"],
.dropdown-item[data-index="13"],
.dropdown-item[data-index="14"],
.dropdown-item[data-index="15"],
.dropdown-item[data-index="16"],
.dropdown-item[data-index="17"],
.dropdown-item[data-index="18"],
.dropdown-item[data-index="19"],
.dropdown-item:nth-child(n+21) {
    animation-delay: 200ms;
}

@keyframes dropdownItemIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

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

.dropdown-container:not(.is-open) .dropdown-item {
    animation: none;
    opacity: 0;
    transform: translateY(-6px);
}