[data-dropdown] {
    background-color: var(--blurred-background);
    backdrop-filter: saturate(150%) blur(14px);
    visibility: hidden;
    opacity: 0;
    position: absolute;
    @include transition(all);
    transform-origin: top center;
    transform: translateY(6px);
    z-index: 10001;
    display: none;
    border-radius: var(--border1);
    border: 1px solid var(--transp-1);
    padding: 6px;
    min-width: 200px;
    animation: animDropdownOut 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    display: none;
    overflow: hidden;

    >a {
        @extend .d-flex, .flex-column;
        gap: 3px;
    }

    >a,
    button {
        display: flex;
        flex-direction: row;
        gap: 10px;
        align-items: center;
        padding: 8px 12px;
        border-radius: var(--border05);
        @include transition(all);
        opacity: 0;
        transform: translateX(-6px);
        animation: animDropdownItems 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        animation-delay: calc(var(--item-index, 0) * 0.04s);
        width: 100%;

        &:hover {
            background-color: var(--transp-1);
        }
    }

    &.active {
        opacity: 1;
        visibility: visible;
        animation: animDropdown 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        display: flex;
    }

    .arrow {
        position: absolute;
        width: 10px;
        height: 10px;
        background: inherit;
        border-top: 1px solid var(--transp-1);
        border-left: 1px solid var(--transp-1);
        transform: rotate(45deg);
        z-index: -1;
        animation: animArrow 0.2s ease forwards;
        opacity: 0;
    }

    &.admin-dropdown {
        min-width: 60px;
    }

    .dropdown-item {
        border-width: 0px;
        box-shadow: none;
        justify-content: flex-start;
        opacity: 0;
        transform: translateX(-4px);
        animation: animDropdownItems 0.3s ease forwards;
        animation-delay: calc(var(--item-index, 0) * 0.03s);

        &:hover {
            background-color: var(--transp-1) !important;
        }
    }
}

@keyframes animDropdown {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.95);
        filter: blur(2px);
    }

    30% {
        opacity: 1;
        filter: blur(0);
    }

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

@keyframes animDropdownOut {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translateY(-8px) scale(0.98);
        opacity: 0;
    }
}

@keyframes animDropdownItems {
    0% {
        opacity: 0;
        transform: translateX(-4px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes animArrow {
    0% {
        opacity: 0;
        transform: rotate(45deg) scale(0.8);
    }
    100% {
        opacity: 1;
        transform: rotate(45deg) scale(1);
    }
}
