.appbar{

	& .primary,
	& .second {
     	@include transition(.150s, emph)
	}

	& .primary {
		
		top: 0px;
		opacity: 1;
		background-color: $c-surface;
		//border-bottom: 1px solid $c-divider;

		&>h1 {
			color: $c-b;
		}

		&>div {
			&>svg {
				fill: $c-b;
			}

			//@include interaction($c-surface);//click/interactions
			@include interaction-surface;
		}
	}

	& .second {
		top: 56px;
		opacity: 0;
		background-color: $c-s;

		&>h1 {
			color: $c-w;
		}

		&>div {
			& svg {
				transform: rotate(90deg);
				fill: $c-w;
				opacity: 1;
				@include transition(0.250s, stan);
			}	

			//@include interaction-dark(flat); //click/hover/focus/
		}		
	}

	& .main {
		background-color: $c-error;
	}

}

//we use this for handle the  fullCont-switchx on the fullcont appbar , 
.appbar {

	& .primary,
	& .second {

		&>.fullCont-switch {
				min-width: 72px;
		}

		&>.select {

			&::before {
					transform: scaleX(1);
				}	

			& svg {
				fill: $c-w;
				opacity: 1;
			}	

			& label {
				opacity: 1;
				@include font(caption, $c-b);
				//font-weight: 700;
			}

		}

		&>.error {

			//background-color: $c-p;
			//@include interaction($c-p);
			&::before {
					transform: scaleX(1);
				background-color: $c-error-b !important;
					border-radius: 50%;
					top: 0px;
					width: 16px;
					height: 16px;
				}	
			
			& svg {
				fill: $c-error-b;
			}	

			& label {
				//@include font(caption, $c-error-b);
			}

		}
		



	}
}


.appbar-black {
	background-color: $c-b; 

	& .primary {
		background-color: $c-b; 

		&>h1 {
			opacity: 1;
			@include font(h6, $c-w);
		}

		&>div {
			@include interaction-black;

			& svg {
				fill: $c-w;
				opacity: 1;
			}	
		}
	}
 }

.appbar-blue {
	
	background-color: $cpd; 

	& .primary {
		background-color: $cpd; 
		
		&>h1 {
			opacity: 1;
			@include font(h6, $c-w);
		}
		
		&>div {
			
				@include interaction-color;

			& label {
				color: $c-w;
			}

			& svg {
					fill: $c-w;
					opacity: 1;
				}	

			&::before {
				background-color: $c-w;
			}
		}

		& .select {
			//border: 3px solid yellow;            //←←←←←←←←←←←←←←←←←←←←	
				  color: $c-w !important;

			& svg {
				opacity: 1;
			}

			& label {
				opacity: 1;
				color: $c-w ;
			}

			&::before {
				background-color: $c-w;
			}
		}


	}

	/*primary*/
}

.appbar-green {

	background-color: $c-good;

	& .primary {
		background-color: $c-good;

		&>h1 {
			opacity: 1;
			@include font(h6, $c-w);
		}

		&>div {

			@include interaction-green-color;

			& label {
				color: $c-w;
			}

			& svg {
				fill: $c-w;
				opacity: 1;
			}

			&::before {
				background-color: $c-w;
			}
		}

		& .select {
			//border: 3px solid yellow;            //←←←←←←←←←←←←←←←←←←←←	
			color: $c-w !important;

			& svg {
				opacity: 1;
			}

			& label {
				opacity: 1;
				color: $c-w ;
			}

			&::before {
				background-color: $c-w;
			}
		}


	}

	/*primary*/
 }

  .appbar-red {

	background-color: $cs-red-appbar;

	& .primary {
		background-color: $cs-red-appbar;

		&>h1 {
			opacity: 1;
			@include font(h6, $c-w);
		}

		&>div {

			@include interaction-red-color;

			& label {
				color: $c-w;
			}

			& svg {
				fill: $c-w;
				opacity: 1;
			}

			&::before {
				background-color: $c-w;
			}
		}

		& .select {
			//border: 3px solid yellow;            //←←←←←←←←←←←←←←←←←←←←	
			color: $c-w !important;

			& svg {
				opacity: 1;
			}

			& label {
				opacity: 1;
				color: $c-w ;
			}

			&::before {
				background-color: $c-w;
			}
		}


	}

	/*primary*/
 }


.appbar-fullcont {
	position: absolute;
	left: 0px !important;
	width: calc(100% - 0px) !important;
	//border: 3px solid yellow;            //←←←←←←←←←←←←←←←←←←←←	


}





@keyframes fadeSlow {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
}
}