$color-primary: #363bf6; 

.wiloke-menu-theme {

	.wiloke-menu-list {
		padding: 0;
		margin: 0;
		list-style: none;

		.wiloke-menu-item {

			> a {
				transition: all 0.3s ease;
			}
		}

		.wiloke-menu-sub {
			background-color: #fff;
		}

		.wiloke-menu-item {

			> a:after {
				float: right;
			}
		}

		.wiloke-menu-sub-dropdown {

			.wiloke-menu-item {

				> a {
					border-bottom: 1px solid rgba(#fff, 0.1);
				}
			}
		}
	}

	&.wiloke-menu-responsive,
	&.wiloke-menu-vertical {

		.wiloke-menu-list {

			.wiloke-menu-item {
				
				> a {
					border-bottom: 1px solid rgba(#fff, 0.1);

					&:after {
						float: right;
					}
				}
			}
		}
	}
}

// Dark
.wiloke-menu-dark {
	background-color: #000;

	&.wiloke-menu-bar {
		color: #fff;
		background-color: #000;
	}

	.wiloke-menu-list {

		.wiloke-menu-item {
			> a {
				color: #fff;
			}

			&:hover > a {
				color: #fff;
				background-color: #f1f1f1;
			}
		}

		.wiloke-menu-sub {
			background-color: #000;
		}

		.wiloke-menu-sub-dropdown {

			.wiloke-menu-item {

				> a {
					border-bottom: 1px solid rgba(#fff, 0.1);
				}
			}
		}
	}
}

// Light
.wiloke-menu-light {
	background-color: #fff;

	&.wiloke-menu-bar {
		color: #000;
		background-color: #f1f1f1;
	}

	.wiloke-menu-list {

		.wiloke-menu-item {

			> a {
				color: #000;
			}

			&:hover > a {
				color: #fff;
				background-color: #000;
			}
		}

		.wiloke-menu-sub {
			background-color: #fff;
		}

		.wiloke-menu-sub-dropdown {

			.wiloke-menu-item {

				> a {
					border-bottom: 1px solid rgba(#000, 0.1);
				}

				&:first-child > a {
					border-top: 1px solid rgba(#000, 0.1);
				}
			}
		}
	}

	&.wiloke-menu-responsive,
	&.wiloke-menu-vertical {

		.wiloke-menu-list {

			.wiloke-menu-item {
				> a {
					border-bottom: 1px solid rgba(#000, 0.1);
				}
			}
		}
	}

	&.wiloke-menu-responsive {

		.wiloke-menu-list {

			.wiloke-menu-item {

				&:first-child > a {
					border-top-width:0;
				}

				
			}
		}
	}
}

// Red
.wiloke-menu-red {
	background-color: #ef5350;

	&.wiloke-menu-bar {
		background-color: #ef5350;
	}

	.wiloke-menu-list {

		.wiloke-menu-item {
			> a {
				color: #fff;
			}

			&:hover > a, &.current-menu-item > a {
				color: #fff;
				background-color: #de4c49;
			}
		}

		.wiloke-menu-sub {
			background-color: #ef5350;
		}
	}
}

// Blue Light
.wiloke-menu-bluelight {
	background-color: #00BCD4;

	&.wiloke-menu-bar {
		color: #fff;
		background-color: #00BCD4;
	}

	.wiloke-menu-list {

		.wiloke-menu-item {
			> a {
				color: #fff;
			}

			&:hover > a, &.current-menu-item > a {
				color: #fff;
				background-color: #02b3ca;
			}
		}

		.wiloke-menu-sub {
			background-color: #00BCD4;
		}
	}
}

// Dark Gray
.wiloke-menu-darkgray {
	background-color: #78909C;

	&.wiloke-menu-bar {
		color: #fff;
		background-color: #78909C;
	}

	.wiloke-menu-list {

		.wiloke-menu-item {
			> a {
				color: #fff;
			}

			&:hover > a, &.current-menu-item > a {
				color: #fff;
				background-color: #708590;
			}
		}

		.wiloke-menu-sub {
			background-color: #78909C;
		}
	}

	&.wiloke-menu-responsive,
	&.wiloke-menu-vertical {

		.wiloke-menu-list {

			.wiloke-menu-item {
				> a {
					border-bottom: 1px solid rgba(#fff, 0.1);

					&:after {
						float: right;
					}
				}
			}
		}
	}
}

// Light Green
.wiloke-menu-lightgreen {
	background-color: #9CCC65;

	&.wiloke-menu-bar {
		color: #fff;
		background-color: #9CCC65;
	}

	.wiloke-menu-list {

		.wiloke-menu-item {
			> a {
				color: #fff;
			}

			&:hover > a, &.current-menu-item > a {
				color: #fff;
				background-color: #93bd63;
			}
		}

		.wiloke-menu-sub {
			background-color: #9CCC65;
		}
	}
}

// Dark Green
.wiloke-menu-darkgreen {
	background-color: #26A69A;

	&.wiloke-menu-bar {
		color: #fff;
		background-color: #26A69A;
	}

	.wiloke-menu-list {

		.wiloke-menu-item {
			> a {
				color: #fff;
			}

			&:hover > a, &.current-menu-item > a {
				color: #fff;
				background-color: #24988d;
			}
		}

		.wiloke-menu-sub {
			background-color: #26A69A;
		}
	}
}

// Orange
.wiloke-menu-orange {
	background-color: #FF7043;

	&.wiloke-menu-bar {
		color: #fff;
		background-color: #FF7043;
	}

	.wiloke-menu-list {

		.wiloke-menu-item {
			> a {
				color: #fff;
			}

			&:hover > a, &.current-menu-item > a {
				color: #fff;
				background-color: #e4663e;
			}
		}

		.wiloke-menu-sub {
			background-color: #FF7043;
		}
	}
}

// Pink
.wiloke-menu-pink {
	background-color: #F06292;

	&.wiloke-menu-bar {
		color: #fff;
		background-color: #F06292;
	}

	.wiloke-menu-list {

		.wiloke-menu-item {
			> a {
				color: #fff;
			}

			&:hover > a, &.current-menu-item > a {
				color: #fff;
				background-color: #e45d8b;
			}
		}

		.wiloke-menu-sub {
			background-color: #F06292;
		}
	}
}

// Brown
.wiloke-menu-brown {
	background-color: #8D6E63;

	&.wiloke-menu-bar {
		color: #fff;
		background-color: #8D6E63;
	}

	.wiloke-menu-list {

		.wiloke-menu-item {
			> a {
				color: #fff;
			}

			&:hover > a, &.current-menu-item > a {
				color: #fff;
				background-color: #886a60;
			}
		}

		.wiloke-menu-sub {
			background-color: #8D6E63;
		}
	}
}

// Dark Blue
.wiloke-menu-darkblue {
	background-color: #5C6BC0;

	&.wiloke-menu-bar {
		color: #fff;
		background-color: #5C6BC0;
	}

	.wiloke-menu-list {

		.wiloke-menu-item {
			> a {
				color: #fff;
			}

			&:hover > a, &.current-menu-item > a {
				color: #fff;
				background-color: #525fab;
			}
		}

		.wiloke-menu-sub {
			background-color: #5C6BC0;
		}
	}
}