/*
-------------------

	Basekit . Omnibar v1

	Styles
	Feb . 2026

	© Exactuflow
	https://basekit.omnibar.exactusensu.pt/

	Url

		src: https://basekit.omnibar.exactusensu.pt/v1/src/
		cdn: https://cdn.exactusensu.pt/basekit/omnibar/v1/

	Boilerplate

		src: <script type="text/javascript" src="https://basekit.omnibar.exactusensu.pt/v1/src/"></script>
		cdn: <script type="text/javascript" src="https://cdn.exactusensu.pt/basekit/omnibar/v1/"></script>

-------------------
*/

/* Settings */

	:root {

		/* Omnibar */

			/* Omnibar . Size */

				--omnibar-min-width-default: 52px;
				--omnibar-max-width-default: 280px;
				
				--omnibar-min-width:	calc(var(--omnibar-min-width-default) * 1	* var(--global-scale-factor));
				--omnibar-min-width-xs: calc(var(--omnibar-min-width-default) * 0.8	* var(--global-scale-factor));
				--omnibar-min-width-sm: calc(var(--omnibar-min-width-default) * 1	* var(--global-scale-factor));
				--omnibar-min-width-md: calc(var(--omnibar-min-width-default) * 1	* var(--global-scale-factor));
				--omnibar-min-width-lg: calc(var(--omnibar-min-width-default) * 1	* var(--global-scale-factor));
				--omnibar-min-width-xl: calc(var(--omnibar-min-width-default) * 1	* var(--global-scale-factor));

				--omnibar-max-width:	calc(var(--omnibar-max-width-default) * 1	* var(--global-scale-factor));
				--omnibar-max-width-xs: calc(var(--omnibar-max-width-default) * 0.8	* var(--global-scale-factor));
				--omnibar-max-width-sm: calc(var(--omnibar-max-width-default) * 1	* var(--global-scale-factor));
				--omnibar-max-width-md: calc(var(--omnibar-max-width-default) * 1	* var(--global-scale-factor));
				--omnibar-max-width-lg: calc(var(--omnibar-max-width-default) * 1	* var(--global-scale-factor));
				--omnibar-max-width-xl: calc(var(--omnibar-max-width-default) * 1	* var(--global-scale-factor));

			/* Omnibar . Colors */

				--omnibar-bg-color-r: 24;
				--omnibar-bg-color-g: 40;
				--omnibar-bg-color-b: 59;
				--omnibar-bg-color_rgb: rgba(var(--omnibar-bg-color-r), var(--omnibar-bg-color-g), var(--omnibar-bg-color-b), 1);
				--omnibar-bg-color_hex: #18283b;

			/* Omnibar . Opacity */

				--omnibar-opacity-default: 0.5;

			/* Omnibar . Text */

				--omnibar-text-title-color: rgba(255,255,255, 1);
				--omnibar-text-item-color: rgba(255,255,255, 1);

			/* Omnibar . Button */

				--omnibar-button-width:		var(--omnibar-min-width);
				--omnibar-button-height:	var(--omnibar-min-width);

			/* Omnibar . Item */

				--omnibar-item-height: calc(var(--omnibar-button-height) * 0.8);
				--omnibar-item-fontsize: calc(var(--omnibar-button-height) * 0.28);

			/* Omnibar . Submenu */
				
				--omnibar-item-submenu-item-height: var(--omnibar-item-height);

			/* Omnibar . Transitions */

				--transition-omnibar:				max-width var(--transition-duration-slow) var(--transition-ease-decelerate), background-position 1000ms var(--transition-ease-slowed);
				--transition-omnibar-button:		var(--transition-buttons);
				--transition-omnibar-handle:		all var(--transition-duration-default) var(--transition-ease-default), transform var(--transition-duration-slow) var(--transition-ease-decelerate) var(--transition-delay-slow), opacity var(--transition-duration-default) var(--transition-ease-default);
				--transition-omnibar-title:			all var(--transition-duration-default) var(--transition-ease-default), transform var(--transition-duration-slow) var(--transition-ease-slowed) var(--transition-delay-default);
				--transition-omnibar-nav:			all var(--transition-duration-slow) var(--transition-ease-decelerate);
				--transition-omnibar-item-handles:	all var(--transition-duration-default) var(--transition-ease-default), transform var(--transition-duration-slow) var(--transition-ease-decelerate) , opacity var(--transition-duration-slow) var(--transition-ease-decelerate) var(--transition-delay-default);
				--transition-omnibar-labels:		all var(--transition-duration-default) var(--transition-ease-default), transform var(--transition-duration-default) var(--transition-ease-slowed) var(--transition-delay-default);
				--transition-omnibar-submenus:		all var(--transition-duration-slow) var(--transition-ease-decelerate);

}

/* Layout elements . Omnibar */

	/* Layout elements . Omnibar . Handle */

		button#omnibar-button {
			z-index: 99999;
			position: absolute;
			left: 0px;
			top: 0px;
			height: var(--omnibar-button-height);
			width: var(--omnibar-button-width);
			background: transparent;
			opacity: var(--omnibar-opacity-default);
			transition: var(--transition-omnibar-button);
		}

		button#omnibar-button:hover {
			cursor: pointer;
			opacity: 1;
		}

		button#omnibar-button::after {
			display: block;
			height:	35%;
			width:	35%;
			content: "";
			margin: 0px auto 0px auto;
			background-image:	 url(../img/logo.exactusensu.svg);
			background-size:	 contain;
			background-position: center center;
			background-repeat: 	 no-repeat;
			transition: var(--transition-resize);
		}

		button#omnibar-button:hover::after  {
			height:	40%;
			width:	40%;
		}

	/* Layout elements . Omnibar . Body */

		#omnibar {
			position: absolute;
			z-index: 2;
			top: 0;
			left: 0;
			width: var(--omnibar-max-width);
			max-width: var(--omnibar-max-width);
			background-color: var(--omnibar-bg-color_rgb);
			background-image: url(../img/omnibar.bg.pattern.svg);
			background-position: 0px 0px;
			background-repeat: repeat;
			background-size: 512px 512px;
			overflow: hidden;
			transition: var(--transition-omnibar);
		}

		#omnibar.closed {
			width: var(--omnibar-max-width);
			max-width: var(--omnibar-min-width);
			background-position: -100px -100px;
		}

		#omnibar.hidden {
			max-width: 0px;
		}

		/* Extra small only (≤ 576px) */
		@media (max-width: 575.98px) {

			#omnibar.closed {
				max-width: 0px;
			}

		}

		#omnibar.hidden {
			max-width: 0px;
		}

		#omnibar * {
			user-select: none;
		}

			#omnibar > v-flex {
				background: linear-gradient(to left, rgba(0,0,0,0.25), transparent 15px);
			}

	/* Layout elements . Omnibar . Start */

		/* Omnibar . Start */

			#omnibar .start {
				padding-left: var(--omnibar-button-width);
				overflow-y: hidden;
				overflow-x: hidden;
			}

			#omnibar .start h-flex {
				flex-wrap: nowrap;
			}

		/* Omnibar . Title */

			#omnibar .start .platform-title {
				min-width: 0;
				flex: 1 1 auto;
				flex-shrink: 0;
				font-size: calc(var(--omnibar-button-width) * 0.350);
				line-height: var(--omnibar-button-height);
			}

			#omnibar .start .platform-title {
				display: inline-block;
				padding-right: calc( var(--omnibar-button-width) / 5);
				color: var(--omnibar-text-title-color);
				opacity: var(--omnibar-opacity-default);
				transition: var(--transition-omnibar-title);
			}

			#omnibar .start .platform-title a:hover {
				opacity: 1;
			}

			#omnibar.closed .start .platform-title a {
				transform: translateX(calc(var(--omnibar-min-width) * -1));
			}

		/* Omnibar . Collapser */

			#omnibar .start button#omnibar-handle {
				height: var(--omnibar-button-height);
				width: calc( var(--omnibar-button-width) / 1.3 );
				font-family: "BasekitSymbols";
				font-size: calc(var(--omnibar-button-width) * 0.35);
				color: #a9aaad;
				background: transparent;
				opacity: 0.3;
				transition: var(--transition-omnibar-handle);
			}

			#omnibar .start button#omnibar-handle::after {
				content: "±";
			}

			#omnibar .start button#omnibar-handle:hover {
				cursor: pointer;
				opacity: 1;
			}

			#omnibar.closed .start button#omnibar-handle {
				transform: translateX(50px);
			}

	/* Layout elements . Omnibar . Middle */
	
		#omnibar .middle {
			overflow-y: auto;
			overflow-x: hidden;
			flex-shrink: 1;
			flex-grow: 1;
		}

		/* Nav */

			#omnibar nav {
				margin-top: calc(var(--omnibar-button-height) * 0.3);
				transition: var(--transition-omnibar-nav);
			}

			#omnibar.closed nav {
				margin-top: 0;
			}		

			/* Nav . Rule */

				#omnibar nav ul li hr {
					width: 100%;
					height: 1px;
					margin-top: calc(var(--omnibar-button-height) * 0.3);
					margin-bottom: calc(var(--omnibar-button-height) * 0.3);
					transition: var(--transition-omnibar-nav);
					background-color: rgba(255, 255, 255, 0.1);
				}

				#omnibar.closed nav ul li hr {
					margin-top: 0;
					margin-bottom: 0;
				}

			/* Nav . Submenus */

				#omnibar nav ul li .submenu {
					display: grid;
					grid-template-rows: 0fr;
					opacity: 0;
					transition: var(--transition-omnibar-submenus);
				}

				#omnibar nav ul li ul > div{
					overflow: hidden;
				}

				#omnibar nav ul li.open .submenu {
					grid-template-rows: 1fr;
					opacity: 1;
				}

				#omnibar.closed nav ul li .submenu,
				#omnibar.closed nav ul li.open .submenu {
					grid-template-rows: 0fr !important;
					opacity: 0 !important;
				}

		/* Items */

			#omnibar .item,
			#omnibar .sub-item  {
				display: flex;
				flex-direction: column;
			}

			/* Links */

				#omnibar .item a,
				#omnibar .sub-item a {
					display: flex;
					height: var(--omnibar-item-height);
					width: var(--omnibar-max-width);
					margin-bottom: 0px;
					flex-shrink: 0;
					flex-wrap: nowrap;
					opacity: var(--omnibar-opacity-default);
					overflow: hidden;
					transition: var(--transition-buttons);
					cursor: pointer;
				}

				#omnibar .item a:hover,
				#omnibar .sub-item a:hover {
					opacity: 1;
					background-color: rgba(0, 0, 0, 0.2);
				}

				#omnibar .item.active > a,
				#omnibar .sub-item.active > a {
					opacity: 1 !important;
				}

				#omnibar .item.disabled a,
				#omnibar .item.active.disabled a,
				#omnibar .sub-item.disabled a,
				#omnibar .sub-item.active.disabled a{
					opacity: 0.3;
					cursor: not-allowed;
				}


				#omnibar.locked .item a,
				#omnibar.locked .item.disabled a,
				#omnibar.locked .item.active.disabled a,

				#omnibar.locked .sub-item a,
				#omnibar.locked .sub-item.disabled a,
				#omnibar.locked .sub-item.active.disabled a {
					opacity: 0.3;
					cursor: wait;
				}

				#omnibar .item.disabled a:hover,
				#omnibar .item.active.disabled a:hover,

				#omnibar.locked .item a:hover,
				#omnibar.locked .item.active a:hover,
				#omnibar.locked .item.disabled a:hover,
				#omnibar.locked .item.active.disabled a:hover,

				#omnibar .sub-item.disabled a:hover,
				#omnibar .sub-item.active.disabled a:hover,

				#omnibar.locked .sub-item a:hover,
				#omnibar.locked .sub-item.active a:hover,
				#omnibar.locked .sub-item.disabled a:hover,
				#omnibar.locked .sub-item.active.disabled a:hover {
					background-color: transparent;
				}

				#omnibar .item a > span,
				#omnibar .sub-item a > span {
					display: flex;
					align-items: center;
					line-height: 1;
					color: white;
				}

				#omnibar .sub-item a {
					padding-left: calc(var(--omnibar-button-width) + calc(var(--omnibar-button-width) / 7));
					padding-right: calc(var(--omnibar-button-width) / 5);
				}

			/* Icons */

				#omnibar .item a .item-icon,
				#omnibar .sub-item a .item-icon {
					height: var(--omnibar-item-height);
					width: var(--omnibar-button-width);
					justify-content: center;
					flex-shrink: 0;
					font-size: calc(var(--omnibar-button-height) * 0.5);
					font-family: "BasekitSymbols";
					line-height: var(--omnibar-button-height);
					color: var(--omnibar-text-item-color);
				}

			/* Labels */

				#omnibar .item a .item-label,
				#omnibar .sub-item a .item-label {
					flex: 1 1 auto;
					justify-content: left;
					padding-right: calc(var(--omnibar-button-width) / 5);
					font-size: var(--omnibar-item-fontsize);
					line-height: calc(calc(var(--omnibar-button-width) * 0.3) + 4px);
					color: var(--omnibar-text-item-color);
					overflow: hidden;
				}

				#omnibar .item a .item-label span,
				#omnibar .sub-item a .item-label span {
					transition: var(--transition-omnibar-labels);
				}

				#omnibar.closed .item a .item-label span,
				#omnibar.closed .sub-item a .item-label span {
					transform: translateX(calc(var(--omnibar-button-width) * -1));
				}

			/* Handles */

				#omnibar .item a .item-handle::after {
					display: inline-flex;
					height: var(--omnibar-item-height);
					width: calc( var(--omnibar-button-width) / 1.3 );
					content: "´";
					font-family: "BasekitSymbols";
					font-size: calc(var(--omnibar-button-height) * 0.25);
					line-height: 1;
					align-items: center;
					justify-content: center;
					opacity: 1;
					transition: var(--transition-omnibar-item-handles);
				}

				#omnibar .item.open a .item-handle::after {
					transform: rotate(180deg);
					transition: var(--transition-transform);
				}

				#omnibar.closed .item a .item-handle::after {
					opacity: 0;
				}

	/* Layout elements . Omnibar . End */
	
		#omnibar .end {
			border-top: 1px solid rgba(255, 255, 255, 0.1);
		}

		/* Account . Info */

			#omnibar .end > #account-info {
				display: flex;
				flex-wrap: nowrap;
				padding-top: calc(var(--omnibar-button-height) * 0.2);
				transition: var(--transition-omnibar-submenus);
				opacity: var(--omnibar-opacity-default);
			}

			#omnibar .end > #account-info:hover {
				opacity: 1;
			}

			#omnibar.closed .end > #account-info {
				padding-top: 0px;
				padding-bottom: 0px;
			}

			#omnibar .end > #account-info > .account-avatar {
				display: flex;
				height: var(--omnibar-button-height);
				width: var(--omnibar-button-width);
				justify-content: center;
				align-items: center;
			}

			#omnibar.closed .end > #account-info > .account-avatar {
				cursor: pointer;
			}

			#omnibar .end > #account-info > .account-avatar span {
				display: flex;
				align-items: center;
				justify-content: center;
				height: calc(var(--omnibar-button-height) * 0.6);
				width: calc(var(--omnibar-button-width) * 0.6);
				border-radius: 50%;
				background: rgba(255, 255, 255, 0.2);
			}

			#omnibar .end > #account-info > .account-avatar span.empty::after{
				font-family: "BasekitSymbols";
				font-size: calc(var(--omnibar-button-height) * 0.6);
				content: "ȿ";
				color: rgba(255, 255, 255, 0.5);
			} 

			#omnibar .end > #account-info > .account-name {
				display: flex;
				flex: 1 1 auto;
				height: var(--omnibar-button-height);
				min-width: 0;
				flex-shrink: 0;
				justify-content: left;
				align-items: center;
				
				transition: var(--transition-buttons);
				overflow: hidden;
			}

			#omnibar .end > #account-info  > .account-name p {
				transition: var(--transition-omnibar-labels);
			}

			#omnibar.closed .end > #account-info  > .account-name p {
				transform: translateX(calc(var(--omnibar-button-width) * -1));
			}

			#omnibar .end > #account-info > .account-name p span {
				display: block;
				line-height: 1;
				color: var(--omnibar-text-item-color);
			}

			#omnibar .end > #account-info > .account-name p span:first-child {
				font-size: calc(var(--omnibar-item-fontsize) * 0.8);
			}

			#omnibar .end > #account-info > .account-name p span:last-child {
				font-size: var(--omnibar-item-fontsize);
			}

		/* Account . Options */

			#omnibar .end > #account-options {
				display: grid;
				grid-template-rows: 1fr;
				opacity: 1;
				transition: var(--transition-omnibar-submenus);
			}

			#omnibar .end > #account-options > div{
				overflow: hidden;
			}

			#omnibar.closed .end > #account-options {
				grid-template-rows: 0fr;
				opacity: 0;
			}