.menubar{

	position: relative;
	display: inline-block;

	top: 0px;
	min-width: 56px;
	left:0px;
	height: 32px;
	margin: 4px;
	//background: $c-surface-l;
	
	
	//border: 0.1px solid blue;               //←←←←←←←←←←←←←←←←←←←

	& > .cont {
		position: relative;
		display: inline-block;
		float: left;
		@include leftFlex;
		@include interaction-white;

		height: 32px;
  	overflow: hidden;

		min-width:  calc(48px - 0px);
		margin:2px;
		cursor: pointer;
		padding-left: 4px;
		padding-right: 4px;
		border-radius: 4px;
		background: $c-w;
		//border: 0.1px solid blue;               //←←←←←←←←←←←←←←←←←←←

		& svg {
			height: 24px;
			width:  24px;
			fill: $c-b;
			z-index: 2;
			opacity: 1;
			//margin-top: 4px;

			@include selectNo;
			@include back-visivility();
			//@include transition(.150s, emph);P
			//border: 0.8px solid blue;           //←←←←←←←←←←←←←←←←←←←←  
		}

		& label {
			margin: 8px;
			margin-left: 4px;
			margin-right: 4px;
			z-index: 2;
			
			@include selectNo;
			@include back-visivility();
			@include font(body3, $c-b);
			//font-weight: 500;
			text-align: center;
			height: 16px;
			//border: 0.5px solid blue;               //←←←←←←←←←←←←←←←←←←←←
		}

		& > .indicator {
			position: relative;
			display: inline-block;
			float: left;
			height: 16px;
			width: 16px;
			fill: $c-b;
			z-index: 2;
			opacity: 1;
			//margin-top: 8px;

			background:   url(svg/expand.svg) no-repeat;
		    background-size: 100% 100%;
		    background-position: center;


			@include selectNo;
			@include back-visivility();
			//@include transition(.150s, emph);P
			//border: 0.8px solid blue;           //←←←←←←←←←←←←←←←←←←←←  
		}

		& > .sub {
			position: absolute;
			display: inline-block;
			top: 32px;
			left: 0px;
			z-index: 2;

			min-height: 32px;
			min-width:  100%;
			//border: 0.8px solid blue;           //←←←←←←←←←←←←←←←←←←←←  
			
			background: $c-w;
		    

			& > .subCont {
				position: relative;
				display: block;
				min-height: 32px;
				min-width:  calc(48px - 0px);
				width: auto;
				margin:2px;
				cursor: pointer;
				padding-left: 8px;
				padding-right: 8px;
				border-radius: 4px;
				overflow: hidden;
				@include interaction-white;
				@include leftFlex;


				& svg{
	
					height: 24px;
					width: 24px;
					fill: $c-b;
					z-index: 2;
					opacity: 1;
					margin-top: 4px;

					@include selectNo;
					@include back-visivility();
					//@include transition(.150s, emph);P
					//border: 0.8px solid blue;           //←←←←←←←←←←←←←←←←←←←←  
				}

				& label{

					margin: 8px;
					margin-left: 4px;
					margin-right: 4px;
					z-index: 2;
					white-space: nowrap;
					
					@include selectNo;
					@include back-visivility();
					@include font(body3, $c-b);
					//font-weight: 500;
					height: 16px;
					//border: 0.5px solid blue;               //←←←←←←←←←←←←←←←←←←←←
				}



				//border: 0.8px solid red;           //←←←←←←←←←←←←←←←←←←←←  
			
			}/*sub*/		

		}/*sub*/



		&:hover{ 
			//background: $c-surface; 
			overflow: visible;

			& > .sub {
				@include bs-8;
			}/*sub*/


			
		}/*hover*/


	}/*cont*/




}/*menubar*/