:root{
	--nav-headbg: #FFFFFF;
	--sidebar-bg: #FFFFFF;
	--headerbg: #FFFFFF;
}

//background for nav header
@each $name, $color in $theme_backgrounds {
	[data-nav-headerbg="#{$name}"][data-theme-version="dark"],
    [data-nav-headerbg="#{$name}"] {
        @if $name != "color_1"  {
			--nav-headbg: #{$color};
			.nav-control{
				background-color: lighten($color: $color, $amount: 10%);
				svg{
					path{
						fill:$white;
					}
				}
			}
			.nav-header{
				border-color:rgba(255, 255, 255, 0.15);
				.brand-logo{
					
					.brand-title{
						svg{
							path{
								fill:$white;	
							}	
						}
						.brand-sub-title{
							color:$white;	
						}
					}
					
				}
				.hamburger .line{
					background:$black;
				}
				
			}
			
		}
	}
}
//background for nav header
@each $name, $color in $theme_backgrounds {
	[data-sibebarbg="#{$name}"][data-theme-version="dark"],
    [data-sibebarbg="#{$name}"] {
        @if $name != "color_1"  {
			--sidebar-bg: #{$color};
			
			.deznav .metismenu ul:after{
				background-color: rgba($white,0.15)!important;
			}
			.deznav .metismenu ul:before{
				background-color: rgba($white,0.15)!important;
			}
			.deznav .metismenu .dz-active.mm-active{
				background-color: lighten($color: $color, $amount: 10%);
			}
			.deznav .metismenu ul .dz-active:before{
				border-color:rgba($white,0.15)!important;
			}
			
			.menu-toggle .nav-text-icon-toggle{
				color:$white!important;
			}
			.menu-toggle .deznav .metismenu > li:hover > a{
				background-color: rgba($white,0.15)!important;
			}
			.menu-toggle .dlabnav .metismenu > li.mm-active > a{
				background-color: rgba($white,0.15)!important;
			}
			.menu-toggle ul.mm-collapse.left li:after{
				background-color:rgba($white,0.15)!important;
			}
			.copyright strong{
				color:$white;
			}
			.menu-toggle .deznav .metismenu li > ul{
				background:$color!important;
			}
			.deznav{
				border-color:lighten($color: $color, $amount: 3%);
			}
			.deznav .metismenu ul a:before{
				background:rgba($white,0.5)!important;
			}
			.deznav .header-info2{
				border-color:rgba($white,0.2)!important;		
			}
			.deznav .menu-title{
				color: $white;
				border-color:rgba($white,0.15)!important;
			}
			.side-bar-profile{
				h4{
					color:$white;
				}
				span{
					color:$white;	
				}
				i{
					color:$white!important;		
				}
			}
			&[data-layout=horizontal] .deznav .metismenu li > ul li a:after{
				background:rgba($white,0.5)!important;
			}
			&[data-sidebar-style="full"][data-layout="vertical"]{
				.deznav {
					.metismenu{
						&>li{
							&.mm-active{
								&>a{
									i{
										color:$white;
									}
								}
							}
						}				
					} 
				}
			}
			&[data-sidebar-style="mini"],
			&[data-sidebar-style="modern"],
			&[data-sidebar-style="compact"],
			&[data-sidebar-style="icon-hover"][data-layout="horizontal"],
			&[data-sidebar-style="full"][data-layout="horizontal"]
			{
				.deznav{
					.metismenu li ul{
						background-color: lighten($color: $color, $amount: 10%);
					}
				} 
				.deznav .metismenu > li.mm-active > a,
				.deznav .metismenu > li:hover > a{
						background:rgba($white,0.15)!important;
				}
			}
			
			&[data-sidebar-style="compact"][data-layout="vertical"]{
				.deznav {
					.metismenu {
						&>li {
							a{
								&:hover{
									color:$white;
								}
							}
							&>a{
								&>i{
									background: lighten($color: $color, $amount: 3%)!important;
									color:rgba($white,0.7);
								}
							}
							&.mm-active,&:hover{
								&>a {
									box-shadow:none;
									background:transparent!important;
									color:$white!important;
									i{
										background: lighten($color: $color, $amount: 10%)!important;
										color:$white!important;
									}
								}
							}
						}
					}
				}
			}
			&[data-sidebar-style="modern"][data-layout="horizontal"]{
				.deznav {
					.metismenu {
						&>li {
							border-color:rgba($white,0.3);
						}
					}
				}
			}
			.deznav {
				.metismenu{
					a{
						color:rgba($white,0.8);
					}
					li{
						ul{
							a{
								&:hover,
								&:focus,
								&.mm-active {
									color:$white;
								}
							}
						}
					}
					&>li{
						&>a{
							color:rgba($white,0.85)!important;
							i{
								color:rgba($white,0.85)!important;
							}
						}
						&.mm-active{
							&>a{
								background:rgba($white,0.15)!important;
								color:$white!important;
								i{
									color:$white!important;
								}
								&:before{
									background:$white!important;
									}
							}
						}
					}
					.has-arrow:after{
						border-color: rgba($white,0.85) transparent transparent rgba($white,0.85)!important;
					}					
				} 
				.header-info2 span{
					color: $white;
				}
				.sidebar-info{
					color: $white; 
					i{
						color: $white; 		
					}
				}
			}
			.plus-box{
				background-color: lighten($color: $color, $amount: 10%);
				h4{
					color:$white;	
				}
			}
			.copyright{
				color:$white;
			}
		}
		
	}
}

//background for nav header
@each $name, $color in $theme_backgrounds {
	[data-headerbg="#{$name}"][data-theme-version="dark"],
    [data-headerbg="#{$name}"] {
        @if $name != "color_1"  {
			--headerbg: #{$color};
				.search-area .input-group-text,
				.search-area .form-control,.search-area .form-control::placeholder{
					color:$white;
				}
				.header-profile{
					border-color:rgba($white,0.15)!important;
				}
				.header-right .notification_dropdown .nav-link{
					border-color: lighten($color: $color, $amount: 10%);
				}
				.header-profile > a.nav-link{
					background-color: lighten($color: $color, $amount: 10%);
				}
				.header-left .search-area .form-control, .header-left .search-area .input-group-text{
					background-color: lighten($color: $color, $amount: 10%);
				}
				.search-area .input-group-text svg path{
					fill:$white;
				}
				.header-right .notification_dropdown .nav-link .badge{
					border-color: lighten($color: $color, $amount: 10%);	
				}
				.header-right .notification_dropdown .nav-link i{
					color: $white;
				}
				.dashboard_bar{
					color:$white;	
				}
			.header-right{
				.search-area .form-control,
				.search-area .input-group-text{
					background-color: lighten($color: $color, $amount: 10%);
					border-color: lighten($color: $color, $amount: 10%);
					i{
						color:$white;
					}
				}
				.plus-icon a{
					background-color: lighten($color: $color, $amount: 10%);	
				}
					
			}
			.header-right{
				svg{
					path{
						fill:$white;
					}
				}
			}
			.header-profile > a.nav-link .header-info small, .header-profile > a.nav-link .header-info span{
				color:$white;	
			}
			.hamburger .line{
				background:$white!important;
			}
			//special work for color
		}	
	}
}