/* ======================================================
   <!-- Dropdown Menu -->
/* ====================================================== */

/* Do not use <a> tag */
.dd-menu-default {

	display: inline-block;
	cursor: pointer;
	position: relative;


    .dd-menu__icon,
    .dd-menu__trigger {
        display: inline-block;
    }

    strong {
        font-weight: normal;
        display: inline-block;
        margin-left: .3rem;
    }
    

}




@keyframes dd-menu-display {
    0%{
        opacity: 0;
        transform: scale(0.98) translateY(-0.6em);
    }

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

@keyframes dd-menu-icon-display {
    0%{
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


  
.dd-menu-list__wrapper {

    --dd-menu-ul-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    --dd-menu-ul-bg: #fff;

    --dd-menu-ulbefore-box-shadow: 2px -2px 6px rgba(0, 0, 0, 0.05);
    --dd-menu-ulbefore-border-color: #fff;
    
    --dd-menu-li-bg: #fff;
    --dd-menu-li-hover-bg: #FAFAFA;
    
    --dd-menu-link-border-color: rgba(0, 0, 0, 0.05);
    --dd-menu-link-color: #333;
    --dd-menu-link-size: 0.75rem;

    

    display: none;
    margin-top: 8px;
    min-width: 50px;
    position: absolute;
    z-index: 1055;  /* --bs-modal-zindex */


    ul, li {
        margin: 0;
        padding: 0;
        list-style: none;
    }


    .dd-menu-list__icon {
        display: block;
        position: absolute;
        opacity: 0;
        top: -3px;
        left: 10px;
        width: 0;
        height: 0;
        transition: .1s ease-in-out;
        box-shadow: var(--dd-menu-ulbefore-box-shadow);
        border-top: 4px solid var(--dd-menu-ulbefore-border-color);
        border-right: 4px solid var(--dd-menu-ulbefore-border-color);
        border-bottom: 4px solid transparent;
        border-left: 4px solid transparent;
        transform: rotate(-45deg);

        &.active {
            animation-name: dd-menu-icon-display;
            animation-duration: 0.4s;
            animation-timing-function: cubic-bezier(0.73, 0.005, 0.22, 1);
            animation-delay: 0.1s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
        }
    }




	> ul {
        display: none;
        white-space: nowrap;
		border-radius: 4px;
		text-align: left;
		box-shadow: var(--dd-menu-ul-box-shadow);
        background: var(--dd-menu-ul-bg);
		transition: .1s ease-in-out;

        /* Prevent the hover threshold from failing */
		&::after {
			content: '';
            display: block;
            background-color: transparent;
			position: absolute;
			top: -10px;
			left: 0;
			width: 100%;
			height: 20px;
		}

		li {
			z-index: 1;
			position: relative;
			background: var(--dd-menu-li-bg);
			padding: 0 .75rem;


            &:hover {
                background: var(--dd-menu-li-hover-bg);
            }

			a {
				display: block;
				border-bottom: 1px solid var(--dd-menu-link-border-color);
				padding: .75rem 0;
				color: var(--dd-menu-link-color);
				font-size: var(--dd-menu-link-size);
				text-decoration: none;

                svg,
                i {
                    display: none;
                }
        

			}


			&:first-child {
				border-radius: 4px 4px 0 0;
			}
			&:last-child {
				border-radius: 0 0 4px 4px;

				a {
					border-bottom: 0;
				}
			}
		}

	}

    
    &.pos-top {

        margin-top: auto;
        margin-bottom: 8px;
        
        
        .dd-menu-list__icon {
            top: auto;
            bottom: -3px;
            border-bottom: 4px solid var(--dd-menu-ulbefore-border-color);
            border-left: 4px solid var(--dd-menu-ulbefore-border-color);
            border-top: 4px solid transparent;
            border-right: 4px solid transparent;
        }
    }


    &.active {
        display: block !important;

        > ul {
            animation: dd-menu-display 0.4s cubic-bezier(0.73, 0.005, 0.22, 1);
			display: block !important;
		}
    }

    
}