/* ======================================================
   <!-- Dropdown Menu -->
/* ====================================================== */
@import '@uixkit/core/_global/scss/mixins';
@import '@uixkit/core/_global/scss/functions';
@import '@uixkit/core/_global/scss/variables';


/* Do not use <a> tag */
.uix-dropdown-menu {
	display: inline-block;
	cursor: pointer;
	position: relative;
    
	> ul {
		position: absolute;
		top: 100%;
		left: 0;
		margin-top: 8px;
		min-width: 170px;
		border-radius: 4px;
		text-align: left;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		@include transition-default();


		&::before {
			content: '';
			position: absolute;
			top: -6px;
			left: 20px;
			width: 0;
			height: 0;
			box-shadow: 2px -2px 6px rgba(0, 0, 0, 0.05);
			border-top: 6px solid #fff;
			border-right: 6px solid #fff;
			border-bottom: 6px solid transparent;
			border-left: 6px solid transparent;
			transform: rotate(-45deg);
		}

		li {
			z-index: 1;
			position: relative;
			background: #fff;
			padding: 0 .75rem;
			color: var(--uix-sub-text-color);
            
            &:hover {
                background: #FAFAFA;
            }

			a {
				display: block;
				border-bottom: 1px solid rgba(0, 0, 0, 0.05);
				padding: .75rem 0;
				color: inherit;
				font-size: 0.75rem;
				text-decoration: none;
			}


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

				a {
					border-bottom: 0;
				}
			}
		}

	}

    &.is-opened {
		> ul {
            animation: uix-cssAnim--dropdown-display 0.4s cubic-bezier(0.73, 0.005, 0.22, 1);
			display: block !important;
		}
    }
  

}



@keyframes uix-cssAnim--dropdown-display {
    0%{
        opacity: 0;
        transform: scale(0.98) translateY(-0.6em);
    }

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