/*<editor-fold desc="Umay Main Menu">*/
.umay-main-menu {
    @apply flex flex-col flex-shrink-0 justify-between w-72 h-screen bg-gray-800 relative transition-size-medium
}

/*<editor-fold desc="Main Menu Header">*/
.umay-main-menu .header {
    @apply flex flex-shrink-0 h-16 px-3 m-4;
}

.umay-main-menu .logo-out-container {
    @apply flex justify-center w-full
}

.umay-main-menu .logo-inside-container {
    @apply flex items-center overflow-hidden
}

.umay-main-menu #logo {
    @apply flex flex-shrink-0 w-10
}

.umay-main-menu #logo-title {
    @apply flex flex-shrink-0 text-3xl h-10 items-center leading-normal transition-size-medium
}

/*</editor-fold>*/
/*<editor-fold desc="Let Menu Links">*/
.umay-main-menu #links-wrapper {
    @apply h-full bg-gray-800 px-4 overflow-x-hidden overflow-y-scroll scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-800 transition-size-long overflow-hidden

}

/*Root Link*/
.umay-main-menu #link {
    @apply overflow-hidden bg-gray-800 mb-2
}

.umay-main-menu-root-link {
    @apply relative z-20 inline-flex w-full border-none border-separate font-semibold cursor-pointer whitespace-nowrap select-none bg-gray-800 active:bg-gray-500 active:text-white transition-color-short transition-size-medium overflow-hidden
}

.umay-main-menu-root-link-active {
    @apply bg-white hover:bg-gray-400 text-gray-700 transition-color-short
}

.umay-main-menu-root-link-passive {
    @apply text-gray-200 bg-gray-800 hover:text-gray-700 hover:bg-gray-100
}

.umay-main-menu-root-link-fold {
    @apply justify-center p-4 space-x-0
}

.umay-main-menu-root-link-expand {
    @apply justify-start p-2 space-x-1
}

.umay-main-menu-label-wrapper {
    @apply flex justify-between items-center transition-size-long overflow-hidden
}

.umay-main-menu-root-link #trigger {
    @apply flex items-center justify-center
}

.umay-main-menu-root-link #trigger-icon {
    @apply w-6 h-6 transform transition-size-short
}

/*Sub Links*/
.umay-main-menu-sub-links-wrapper {
    @apply flex flex-col bg-gray-100 bg-opacity-10 transition-size-long overflow-hidden
}

.umay-main-menu-sub-link {
    @apply relative inline-flex flex-shrink-0 p-2 items-center w-full whitespace-nowrap cursor-pointer active:bg-gray-500 active:text-white transition-color-short overflow-hidden
}

.umay-main-menu-sub-link-active {
    @apply bg-white bg-opacity-60 hover:bg-opacity-25 text-gray-800 hover:text-white font-bold
}

.umay-main-menu-sub-link-passive {
    @apply text-gray-200 hover:text-white bg-opacity-10 hover:bg-gray-200 hover:bg-opacity-25
}

.umay-main-menu-sub-link-fold {
    @apply justify-center p-4 space-x-0
}

.umay-main-menu-sub-link-expand {
    @apply justify-start p-2 space-x-1
}

.umay-main-menu-icon {
    @apply flex flex-shrink-0 justify-center items-center w-6 h-6
}

/*</editor-fold>*/
/*<editor-fold desc="Main Menu Footer">*/
.umay-main-menu #footer {
    @apply flex flex-shrink-0 justify-center items-center w-full overflow-hidden
}

.umay-main-menu #footer-links-wrapper {
    @apply grid grid-flow-row auto-cols-max auto-rows-min w-full m-4 justify-center items-center overflow-hidden
}

.umay-main-menu #footer-link {
    @apply flex items-center px-2 py-2 text-white bg-gray-100 bg-opacity-10 hover:text-gray-700 hover:bg-gray-100 hover:bg-opacity-75 focus:text-gray-400 focus:bg-gray-700 space-x-1 transition-color-short overflow-hidden
}

.umay-main-menu #footer-trigger {
    @apply flex flex-shrink-0 w-full m-4 justify-center items-center text-white cursor-pointer transform hover:scale-110
}

.umay-main-menu-trigger-icon {
    @apply w-8 h-8
}

/*</editor-fold>*/
/*<editor-fold desc="Main Menu Transitions">*/
.umay-main-menu-show {
    @apply m-0 opacity-100
}

.umay-main-menu-hide {
    @apply -ml-72 opacity-0
}

.umay-main-menu-fold {
    @apply w-[6.5rem]
}

.umay-main-menu-expand {
    @apply w-80
}

.umay-main-menu-title-show {
    @apply max-w-sm opacity-100 ml-1
}

.umay-main-menu-title-hide {
    @apply ml-0 max-w-min opacity-0
}

/*</editor-fold>*/
/*</editor-fold>*/

/*<editor-fold desc="Abay Main Menu">*/
.abay-main-menu{
    @apply relative bg-slate-50 dark:bg-slate-800 z-20 flex flex-col w-28 dark:border-slate-600 px-4 text-slate-700 dark:text-slate-200 select-none transition-size-medium
}

.abay-main-menu-show {
    @apply m-0 opacity-100
}

.abay-main-menu-root-wrapper{
    @apply flex flex-col flex-shrink-0 items-center justify-center w-20 py-[.5rem] rounded-md text-center cursor-pointer hover:bg-slate-100/10 transition-color-short
}

.abay-main-menu-root-link{
    @apply flex flex-col justify-center items-center space-y-1
}

.abay-main-menu-hide {
    @apply -ml-28 opacity-0
}
/*</editor-fold>*/
