/* =====================================================
   DROPDOWN
===================================================== */

@media (hover: hover) {
    .dropdown-arrow:hover {
        transform: scale(1.2);
    }

    .dropdown-arrow.open:hover {
        transform: scale(1.2) rotate(180deg);
    }

    .dropdown-item:hover {
        transform: scale(1.2);
    }
}

.dropdown {

    display: flex;
    flex-direction: column;
    align-items: flex-start;

}

/* =====================================================
   ARROW
===================================================== */

.dropdown-arrow {

    width: var(--arrow-icon-size);
    aspect-ratio: 1 / 1;

    cursor: pointer;

    user-select: none;

    transition:
        transform var(--transition-normal) var(--ease),
        opacity var(--transition-fast) var(--ease);

}

.dropdown-arrow.open {

    transform: rotate(180deg);
    /* transform: scale(1.2); */

}

.dropdown-arrow:active {
    transform: scale(0.9) !important;
    filter: brightness(1.1);
}

.dropdown-arrow.open:active {
    transform: scale(0.9) rotate(180deg) !important;
}

/* =====================================================
   MENU
===================================================== */

.dropdown-menu {

    display: flex;
    flex-direction: column;

    margin-top: 12px;
    gap: 10px;

    /* overflow: hidden; */
    overflow: visible;

    max-height: 0;

    opacity: 0;

    transform: translateY(-10px);

    pointer-events: none;

    transition:
        max-height var(--transition-normal) var(--ease),
        opacity var(--transition-normal) var(--ease),
        transform var(--transition-normal) var(--ease);

}

/* opened */

.dropdown-menu.open {

    max-height: 500px;

    opacity: 1;

    transform: translateY(0);

    pointer-events: auto;

}

/* =====================================================
   MENU ITEM
===================================================== */

.dropdown-item {

    height: var(--menu-icon-height);
    width: auto;

    cursor: pointer;

    user-select: none;

    transition:
        transform var(--transition-fast) var(--ease),
        opacity var(--transition-fast) var(--ease);

}

.dropdown-item:active {
    transform: scale(0.95) !important;
    filter: brightness(1.1);
}

/* =====================================================
   LOCKED
===================================================== */

.dropdown.locked {

    pointer-events: none;

}