/**
 * PM UI Framework
 * Component: Dropdowns
 * Version: 0.1.0
 *
 * Dropdown menus, navigation helpers
 */


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

.pm-dropdown {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
}


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

.pm-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    cursor: pointer;
    user-select: none;
}


/* Arrow indicator */

.pm-dropdown-toggle::after {
    content: "";
    display: inline-block;
    width: .45rem;
    height: .45rem;
    margin-left: .35rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .25s ease;
}


.pm-dropdown.is-open .pm-dropdown-toggle::after,
.pm-dropdown:hover .pm-dropdown-toggle::after {
    transform: rotate(225deg) translate(-2px,-2px);
}



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

.pm-dropdown-menu {

    position: absolute;
    top: calc(100% + .5rem);
    left: 0;

    min-width: 220px;

    background: var(--pm-bg, #ffffff);

    border: 1px solid var(--pm-border, #e0e0e0);

    border-radius: var(--pm-radius-md, 12px);

    box-shadow:
        0 10px 25px rgba(0,0,0,.12);

    padding: .5rem;

    z-index: 1000;


    opacity: 0;
    visibility: hidden;

    transform:
        translateY(10px);

    transition:
        opacity .25s ease,
        transform .25s ease,
        visibility .25s ease;

}

/* =====================================================
   DROPDOWN OPEN STATE
===================================================== */

.pm-dropdown:hover .pm-dropdown-menu,
.pm-dropdown.is-open .pm-dropdown-menu,
.pm-dropdown:focus-within .pm-dropdown-menu {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(0);
}



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

.pm-dropdown-item {

    display: flex;

    align-items: center;

    width: 100%;

    padding: .65rem .85rem;

    border-radius: var(--pm-radius-sm, 8px);

    font-size: .95rem;

    line-height: 1.4;

    color: var(--pm-text, #333333);

    text-decoration: none;

    cursor: pointer;

    transition:
        background-color .2s ease,
        color .2s ease;

}



.pm-dropdown-item:hover,
.pm-dropdown-item:focus-visible {

    background: var(--pm-bg-soft, #f5f5f5);

    color: var(--pm-primary, #2E7D32);

    outline: none;

}



/* Active item */

.pm-dropdown-item.is-active {

    background: var(--pm-primary, #2E7D32);

    color: #ffffff;

}



.pm-dropdown-item.is-active:hover {

    background: var(--pm-primary-dark, #1B5E20);

    color: #ffffff;

}



/* Disabled item */

.pm-dropdown-item.is-disabled {

    opacity: .5;

    cursor: not-allowed;

    pointer-events: none;

}



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

.pm-dropdown-divider {

    height: 1px;

    margin: .45rem 0;

    background:
        var(--pm-border, #e0e0e0);

}

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

.pm-dropdown-menu.pm-dropdown-right {

    left: auto;

    right: 0;

}


.pm-dropdown-menu.pm-dropdown-center {

    left: 50%;

    transform:
        translate(-50%, 10px);

}



.pm-dropdown:hover .pm-dropdown-menu.pm-dropdown-center,
.pm-dropdown.is-open .pm-dropdown-menu.pm-dropdown-center,
.pm-dropdown:focus-within .pm-dropdown-menu.pm-dropdown-center {

    transform:
        translate(-50%, 0);

}



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

.pm-dropdown-menu.pm-dropdown-sm {

    min-width: 160px;

}


.pm-dropdown-menu.pm-dropdown-lg {

    min-width: 320px;

}



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

.pm-dropdown-header {

    padding: .65rem .85rem;

    margin-bottom: .25rem;

    font-size: .8rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .05em;

    color:
        var(--pm-text-muted, #757575);

}



/* =====================================================
   DROPDOWN ICON ITEMS
===================================================== */

.pm-dropdown-item {

    gap: .65rem;

}



.pm-dropdown-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 1.25rem;

    height: 1.25rem;

    flex-shrink: 0;

    color:
        var(--pm-primary, #2E7D32);

}



/* =====================================================
   DROPDOWN FEATURED ITEM
===================================================== */

.pm-dropdown-item.pm-featured {

    background:
        rgba(46,125,50,.08);

    color:
        var(--pm-primary, #2E7D32);

    font-weight: 600;

}


.pm-dropdown-item.pm-featured:hover {

    background:
        rgba(46,125,50,.15);

}

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

.pm-dropdown-menu.pm-dropdown-dark {

    background:
        var(--pm-dark, #212121);

    border-color:
        rgba(255,255,255,.08);

    box-shadow:
        0 12px 30px rgba(0,0,0,.35);

}



.pm-dropdown-menu.pm-dropdown-dark .pm-dropdown-item {

    color:
        rgba(255,255,255,.9);

}



.pm-dropdown-menu.pm-dropdown-dark .pm-dropdown-item:hover,
.pm-dropdown-menu.pm-dropdown-dark .pm-dropdown-item:focus-visible {

    background:
        rgba(255,255,255,.1);

    color:
        #ffffff;

}



.pm-dropdown-menu.pm-dropdown-dark .pm-dropdown-divider {

    background:
        rgba(255,255,255,.15);

}



/* =====================================================
   ANIMATION VARIANTS
===================================================== */

.pm-dropdown-menu.pm-dropdown-fade {

    transform:
        translateY(5px);

}



.pm-dropdown:hover .pm-dropdown-menu.pm-dropdown-fade,
.pm-dropdown.is-open .pm-dropdown-menu.pm-dropdown-fade,
.pm-dropdown:focus-within .pm-dropdown-menu.pm-dropdown-fade {

    transform:
        translateY(0);

}



/* =====================================================
   LONG DROPDOWN CONTENT
===================================================== */

.pm-dropdown-menu.pm-dropdown-scroll {

    max-height: 320px;

    overflow-y: auto;

    scrollbar-width: thin;

}



/* =====================================================
   ACCESSIBILITY
===================================================== */

.pm-dropdown-toggle:focus-visible {

    outline:

        3px solid
        rgba(25,118,210,.35);

    outline-offset:

        3px;

}



.pm-dropdown-item:focus-visible {

    position: relative;

    z-index: 1;

}



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

@media (max-width: 768px) {


    .pm-dropdown {

        width: 100%;

    }



    .pm-dropdown-toggle {

        width: 100%;

        justify-content: space-between;

    }



    .pm-dropdown-menu {

        position: static;

        width: 100%;

        margin-top: .5rem;

        box-shadow:
            0 6px 18px rgba(0,0,0,.08);

    }


}

/* =====================================================
   NESTED DROPDOWN / SUBMENU
===================================================== */

.pm-dropdown-submenu {

    position: relative;

}



.pm-dropdown-submenu > .pm-dropdown-menu {

    top: 0;

    left: calc(100% + .35rem);

    margin-top: 0;

}



.pm-dropdown-submenu:hover > .pm-dropdown-menu,
.pm-dropdown-submenu:focus-within > .pm-dropdown-menu {

    opacity: 1;

    visibility: visible;

    transform:
        translateX(0);

}



/* Submenu indicator */

.pm-dropdown-submenu > .pm-dropdown-item::after {

    content: "";

    margin-left: auto;

    width: .45rem;

    height: .45rem;

    border-right: 2px solid currentColor;

    border-top: 2px solid currentColor;

    transform:
        rotate(45deg);

}



/* =====================================================
   DROPDOWN ACTION GROUP
===================================================== */

.pm-dropdown-actions {

    display: flex;

    gap: .5rem;

    padding: .65rem .85rem;

    border-top:

        1px solid
        var(--pm-border, #e0e0e0);

}



.pm-dropdown-actions .pm-btn {

    flex: 1;

}



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

.pm-nav-dropdown {

    display: inline-flex;

    align-items: center;

}



.pm-nav-dropdown .pm-dropdown-menu {

    margin-top: .75rem;

}



.pm-nav-dropdown .pm-dropdown-item {

    white-space: nowrap;

}



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

.pm-dropdown-menu.pm-dropdown-compact {

    padding: .25rem;

}



.pm-dropdown-menu.pm-dropdown-compact .pm-dropdown-item {

    padding:

        .45rem .65rem;

    font-size:

        .875rem;

}



/* =====================================================
   DISABLE HOVER ON TOUCH DEVICES
===================================================== */

@media (hover: none) {


    .pm-dropdown:hover .pm-dropdown-menu {

        opacity: 0;

        visibility: hidden;

    }


    .pm-dropdown.is-open .pm-dropdown-menu {

        opacity: 1;

        visibility: visible;

    }


}