// Sidenav background variants
.sn-bg-1 {
    background-image: url(https://mdbootstrap.com/img/Photos/Others/sidenav1.jpg);
}

.sn-bg-2 {
    background-image: url(https://mdbootstrap.com/img/Photos/Others/sidenav2.jpg);
}

.sn-bg-3 {
    background-image: url(https://mdbootstrap.com/img/Photos/Others/sidenav3.jpg);
}

.sn-bg-4 {
    background-image: url(https://mdbootstrap.com/img/Photos/Others/sidenav4.jpg);
}

$skins: (
	"white": (
		"skin-primary-color": #4285F4,
		"skin-navbar": #fff,
		"skin-footer-color": #6f7178,
		"skin-accent": #4285F4,
		"skin-flat": #F9F9F9,
		// Sidenav Styles
		"skin-sidenav-item": #4285F4,
		"skin-sidenav-item-hover": rgba(0,0,0,0.05),
		// Gradients
		"skin-gradient-start": #ababab,
		"skin-gradient-end": #fff,
		// Masks
		"skin-mask-slight": rgba(255, 255, 255, 0.5),
		"skin-mask-light": rgba(255, 255, 255, 0.65),
		"skin-mask-strong": rgba(255, 255, 255, 0.8),
		// Buttons
		"skin-sn-child": #4285F4,
		"skin-btn-primary": #4285F4,
		"skin-btn-secondary": #fc685f,
		"skin-btn-default": #454545,
		"skin-text": #424242
	),
	"black": (
		"skin-primary-color": #2AD1A3,
		"skin-navbar": #222,
		"skin-footer-color": #222,
		"skin-accent": #2AD1A3,
		"skin-flat": #222,
		// Sidenav Styles
		"skin-sidenav-item": #2AD1A3,
		"skin-sidenav-item-hover": #2AD1A3,
		// Gradients
		"skin-gradient-start": #000,
		"skin-gradient-end": #616161,
		// Masks
		"skin-mask-slight": rgba(0, 0, 0, 0.5),
		"skin-mask-light": rgba(0, 0, 0, 0.65),
		"skin-mask-strong": rgba(0, 0, 0, 0.8),
		// Buttons
		"skin-sn-child": #2AD1A3,
		"skin-btn-primary": #2AD1A3,
		"skin-btn-secondary": #0f478a,
		"skin-btn-default": #222222,
		"skin-text": #fff
	),
	"cyan": (
		"skin-primary-color": #4fada7,
		"skin-navbar": #114861,
		"skin-footer-color": #114861,
		"skin-accent": #f0b247,
		"skin-flat": #24879d,
		// Sidenav Styles
		"skin-sidenav-item": rgba(29, 65, 82, 0.8),
		"skin-sidenav-item-hover": rgba(29, 65, 82, 0.8),
		// Gradients
		"skin-gradient-start": #114861,
		"skin-gradient-end": #45b0c0,
		// Masks
		"skin-mask-slight": rgba(21, 78, 96, 0.5),
		"skin-mask-light": rgba(21, 78, 96, 0.65),
		"skin-mask-strong": rgba(21, 78, 96, 0.8),
		// Buttons
		"skin-sn-child": #ffa742,
		"skin-btn-primary": #ffa742,
		"skin-btn-secondary": #45b0c0,
		"skin-btn-default": #114861,
		"skin-text": #fff
	),
	"mdb": (
		"skin-primary-color": #33b5e5,
		"skin-navbar": #243a51,
		"skin-footer-color": #243a51,
		"skin-accent": #33b5e5,
		"skin-flat": #224562,
		// Sidenav Styles
		"skin-sidenav-item": rgba(72, 198, 255, 0.8),
		"skin-sidenav-item-hover": rgba(72, 198, 255, 0.8),
		// Gradients
		"skin-gradient-start": #0e2135,
		"skin-gradient-end": #2c76b8,
		// Masks
		"skin-mask-slight": rgba(13, 36, 60, 0.5),
		"skin-mask-light": rgba(13, 36, 60, 0.65),
		"skin-mask-strong": rgba(13, 36, 60, 0.8),
		// Buttons
		"skin-sn-child": #67d5ff,
		"skin-btn-primary": #33b5e5,
		"skin-btn-secondary": #0e3d67,
		"skin-btn-default": #1a6398,
		"skin-text": #fff
	),
	"deep-purple": (
		"skin-primary-color": #d0637c,
		"skin-navbar": #7f7e91,
		"skin-footer-color": #7f7e91,
		"skin-accent": #ac85f0,
		"skin-flat": #372e5f,
		// Sidenav Styles
		"skin-sidenav-item": rgba(176, 139, 240, 0.5),
		"skin-sidenav-item-hover": rgba(176, 139, 240, 0.5),
		// Gradients
		"skin-gradient-start": #2e1f49,
		"skin-gradient-end": #a47fe3,
		// Masks
		"skin-mask-slight": rgba(36, 9, 56, 0.5),
		"skin-mask-light": rgba(36, 9, 56, 0.65),
		"skin-mask-strong": rgba(36, 9, 56, 0.88),
		// Buttons
		"skin-sn-child": #c9abfc,
		"skin-btn-primary": #ac85f0,
		"skin-btn-secondary": #6e4ca3,
		"skin-btn-default": #372e5f,
		"skin-text": #fff
	),
	"navy-blue": (
		"skin-primary-color": #309e9e,
		"skin-navbar": #353b50,
		"skin-footer-color": #353b50,
		"skin-accent": #40c6c6,
		"skin-flat": #4c5678,
		// Sidenav Styles
		"skin-sidenav-item": rgba(37, 207, 207, 0.8),
		"skin-sidenav-item-hover": rgba(37, 207, 207, 0.8),
		// Gradients
		"skin-gradient-start": #222735,
		"skin-gradient-end": #4f68a6,
		// Masks
		"skin-mask-slight": rgba(14, 15, 32, 0.5),
		"skin-mask-light": rgba(14, 15, 32, 0.65),
		"skin-mask-strong": rgba(14, 15, 32, 0.8),
		// Buttons
		"skin-sn-child": #40c6c6,
		"skin-btn-primary": #40c6c6,
		"skin-btn-secondary": #7e51b4,
		"skin-btn-default": #293756,
		"skin-text": #fff
	),
	"pink": (
		"skin-primary-color": #bd5d70,
		"skin-navbar": #535466,
		"skin-footer-color": #535466,
		"skin-accent": #9fa0ae,
		"skin-flat": #aa5077,
		// Sidenav Styles
		"skin-sidenav-item": rgba(0, 0, 0, 0.4),
		"skin-sidenav-item-hover": rgba(0, 0, 0, 0.4),
		// Gradients
		"skin-gradient-start": #812b5a,
		"skin-gradient-end": #f28cc0,
		// Masks
		"skin-mask-slight": rgba(152, 47, 88, 0.5),
		"skin-mask-light": rgba(152, 47, 88, 0.65),
		"skin-mask-strong": rgba(152, 47, 88, 0.8),
		// Buttons
		"skin-sn-child": #ffb0e6,
		"skin-btn-primary": #601f39,
		"skin-btn-secondary": #e7649d,
		"skin-btn-default": #535466,
		"skin-text": #fff
	),
	"indigo": (
		"skin-primary-color": #7f82c5,
		"skin-navbar": #9095aa,
		"skin-footer-color": #9095aa,
		"skin-accent": #fd668c,
		"skin-flat": #404f9f,
		// Sidenav Styles
		"skin-sidenav-item": rgba(250, 80, 121, 0.8),
		"skin-sidenav-item-hover": rgba(250, 80, 121, 0.8),
		// Gradients
		"skin-gradient-start": #272d6e,
		"skin-gradient-end": #90a8ff,
		// Masks
		"skin-mask-slight": rgba(35, 65, 134, 0.5),
		"skin-mask-light": rgba(35, 65, 134, 0.65),
		"skin-mask-strong": rgba(35, 65, 134, 0.8),
		// Buttons
		"skin-sn-child": #ff89ac,
		"skin-btn-primary": #fd668c,
		"skin-btn-secondary": #3c61ae,
		"skin-btn-default": #9095aa,
		"skin-text": #fff
	),
	"light-blue": (
		"skin-primary-color": #3d799c,
		"skin-navbar": #3f5c80,
		"skin-footer-color": #3f5c80,
		"skin-accent": #b4c2c9,
		"skin-flat": #6a9ed3,
		// Sidenav Styles
		"skin-sidenav-item": rgba(29, 54, 86, 0.6),
		"skin-sidenav-item-hover": rgba(29, 54, 86, 0.6),
		// Gradients
		"skin-gradient-start": #69adf4,
		"skin-gradient-end": #69adf4,
		// Masks
		"skin-mask-slight": rgba(87, 134, 180, 0.5),
		'skin-mask-light': rgba(87, 134, 180, 0.65),
		"skin-mask-strong": rgba(87, 134, 180, 0.8),
		// Buttons
		"skin-sn-child": #aadeff,
		"skin-btn-primary": #ff4a67,
		"skin-btn-secondary": #64c3f0,
		"skin-btn-default": #2d486a,
		"skin-text": #fff
	),
	"grey": (
		"skin-primary-color": #2b2b2b,
		"skin-navbar": #44474b,
		"skin-footer-color": #44474b,
		"skin-accent": #75c1f0,
		"skin-flat": #a5a4a4,
		// Sidenav Styles
		"skin-sidenav-item": rgba(0, 0, 0, 0.4),
		"skin-sidenav-item-hover": rgba(0, 0, 0, 0.4),
		// Gradients
		"skin-gradient-start": #383838,
		"skin-gradient-end": #a5a4a4,
		// Masks
		"skin-mask-slight": rgba(121, 121, 121, 0.5),
		"skin-mask-light": rgba(121, 121, 121, 0.65),
		"skin-mask-strong": rgba(121, 121, 121, 0.8),
		// Buttons
		"skin-sn-child": #afdffc,
		"skin-btn-primary": #46aded,
		"skin-btn-secondary": #7d8488,
		"skin-btn-default": #353637,
		"skin-text": #fff
	)
);

@each $skin, $data in $skins {
	.#{$skin}-skin {
	    .gradient {
	        background: map-get($data, skin-gradient-start);
	        /* Old browsers */
	        background: -moz-linear-gradient(-45deg, map-get($data, skin-gradient-start) 0%, map-get($data, skin-gradient-end) 100%);
	        /* FF3.6-15 */
	        background: -webkit-linear-gradient(-45deg, map-get($data, skin-gradient-start) 0%, map-get($data, skin-gradient-end) 100%);
	        /* Chrome10-25,Safari5.1-6 */
	        background: linear-gradient(135deg, map-get($data, skin-gradient-start) 0%, map-get($data, skin-gradient-end) 100%);
	        /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	    }
	    .primary-color {
	        background-color: map-get($data, skin-primary-color)!important;
	    }
	    .navbar {
	        background-color: map-get($data, skin-navbar);
	        color: map-get($data, skin-text);
	        .navbar-nav {
	            .nav-item {
	                .dropdown-menu a {
	                    &:hover,
	                    &:focus,
	                    &:active {
	                        background-color: darken( map-get($data, skin-accent), 5%);
	                    }
	                }
	                @if $skin == "white" {
	                	a {
	                		color: map-get($data, skin-text);
	                	}
	                }
	            }
	        }
	    }
	    .page-footer {
	        background-color: map-get($data, skin-footer-color);
	    }
	    .side-nav {
	        background-color: map-get($data, skin-flat);
	        .logo-wrapper {
	            &> div {
	                background-color: transparent!important;
	            }
	        }
	        .sn-avatar-wrapper img {
	            border: 3px solid darken( map-get($data, skin-accent), 15%);
	        }
	        .social a {
                @if $skin == "white" {
                	.fa {
                		color: map-get($data, skin-text);
                	}
                }
	            &:hover {
	                .fa {
	                    color: map-get($data, skin-accent) !important;
	                    @include transition (all 0.3s linear);
	                }
	            }
	        }
	        @if $skin == "white" {
				.search-form input[type=text] {
					color: #424242;
				    border-bottom: 1px solid rgba(153, 153, 153, 0.3);
				    @include placeholder {
				    	color: rgba(map-get($data, skin-text), .5) !important;
				    }
				}
	        }
	        .collapsible li {
	            background-color: transparent;
	            @if $skin == "white" {
	            	a {
	            		font-weight: 400;
	            	}
	            }
	            .collapsible-header {
		            color: map-get($data, skin-text);
	                @include transition (all 0.3s linear);
	                &.active {
	                	@if $skin == "white" {
							color: map-get($data, skin-sidenav-item);
							background-color: transparent;
                		} @else {
		                    background-color: map-get($data, skin-sidenav-item-hover);
                		}
	                }
	                &:hover {
	                    background-color: map-get($data, skin-sidenav-item-hover);
	                }
	            }
	            .collapsible-body a {
	            	color: map-get($data, skin-text);
	            	&:hover {
	            		color:map-get($data, skin-sn-child);
	            	}
	            }
	        }
	        .fa {
	            color: map-get($data, skin-text);
	        }
	        .sidenav-bg {
	            &:after,
	            &.mask-strong:after,
	            {
	                background: map-get($data, skin-mask-strong);
	            }
	            &.mask-light:after {
	                background: map-get($data, skin-mask-light);
	            }
	            &.mask-slight:after {
	                background: map-get($data, skin-mask-slight);
	            }
	        }
	    }
	    @include make-button('primary', map-get($data, skin-btn-primary));
	    @include make-button('secondary', map-get($data, skin-btn-secondary));
	    @include make-button('default', map-get($data, skin-btn-default));
	    .card .btn-action {
	        background: map-get($data, skin-btn-default);
	        &:hover,
	        &:focus {
	            background-color: lighten( map-get($data, skin-btn-default), 5%)!important;
	        }
	        &.active {
	            background-color: darken( map-get($data, skin-btn-default), 20%)!important;
	        }
	    }
	    // Custom inputs
	    input[type="email"]:focus:not([readonly]),
	    input[type="text"]:focus:not([readonly]),
	    input[type="password"]:focus:not([readonly]),
	    textarea.md-textarea:focus:not([readonly]) {
	        border-color: map-get($data, skin-accent);
	        box-shadow: 0 1px 0 0 map-get($data, skin-accent);
	        &+label {
	            color: map-get($data, skin-accent);
	        }
	    }
	    input[type=checkbox]:checked {
	        &+label {
	            &:before {
	                border-right: 2px solid map-get($data, skin-accent);
	                border-bottom: 2px solid map-get($data, skin-accent);
	            }
	        }
	    }
	    input[type=checkbox].filled-in:checked {
	        &+label {
	            &:before {
	                border-right: 2px solid #fff;
	                border-bottom: 2px solid #fff;
	            }
	            &:after {
	                background-color: map-get($data, skin-accent);
	                border-color: map-get($data, skin-accent);
	            }
	        }
	    }
	    .md-form {
	        .prefix {
	            &.active {
	                color: map-get($data, skin-accent);
	            }
	        }
	    }
	    /* Select colors */
	    .dropdown-content {
	        li:not(.disabled) {
	            span {
	                color: map-get($data, skin-accent);
	            }
	        }
	    }
	    .top-nav-collapse {
	        background-color: map-get($data, skin-navbar);
	    }
	    .carousel-multi-item {
	        .controls-top > a,
	        .carousel-indicators li,
	        .carousel-indicators li.active {
	            background-color: map-get($data, skin-accent);
	        }
	    }
	    // Form-header, card-header
	    .form-header,
	    .card-header {
	        background-color: lighten( map-get($data, skin-accent), 2%);
	    }
	    .spinner-primary-color,
	    .spinner-primary-color-only {
	        border-color: map-get($data, skin-primary-color);
	    }
	    .pagination-primary-color {
	        .page-item.active .page-link,
	        .page-item.active .page-link:focus,
	        .page-item.active .page-link:hover {
	            color: #fff;
	            background-color: map-get($data, skin-primary-color);
	            border-color: map-get($data, skin-primary-color);
	        }
	        .page-link {
	            color: map-get($data, skin-primary-color);
	        }
	    }
	}
}