@import "variables";
.menu-categories {
	margin: 0 -6px;
	padding: 0;
	font-size: 14px;
	list-style: none;

	.menu-item, a.menu-item {
		border: none;
		position: relative;
		display: block;
		padding: 12px 20px 12px 76px;
		color: $gray_dark;
		line-height: 1.25;
		@include transition(none);
		.marks {
			float: right;
			padding-left: 8px;
			.label {
				padding: 2px 4px 3px;
				font-size: 12px;
				line-height: 1;
				@include border-radius(0);
			}
		}
		.image {
			background-repeat: no-repeat;
			background-position: 50% 50%;
			background-size: cover;
			position: absolute; top: 50%; left: 6px;
			display: block;
			width: 64px;
			height: 32px;
			margin-top: -16px;
			.img {
				position: absolute; top: 50%; left: 50%;
				display: block;
				max-width: 100%;
				max-height: 100%;
				@include transform(translateX(-50%) translateY(-50%));
			}
		}
		.title {
			.label {
				padding: 2px 4px 3px;
				font-size: 12px;
				line-height: 1;
				@include border-radius(0);
			}
		}
		& > .fa {
			position: absolute; top: 50%; right: 6px;
			@include transform(translateY(-50%));
		}
		&.active {
			background: $blue_light;
		}
		&:hover, &.hover {
			//background: $gray_dark;
			background: $blue_light;
			//color: $white;
		}
	}

	& > li {
		position: relative;

		&:not(:first-child){
			border-top: 1px solid $color_gray_10;
		}

		& > .menu-item {
			.title {
				font-weight: bold;
			}
		}

		.menu-sublist {
			margin: 0;
			padding: 0;
			list-style: none;
			display: none;
			& > li {
				//padding-left: 8px;
				& > .menu-item, & > a.menu-item {
					padding: 10px 8px 10px 124px;
					.image {
						top: 2px;
						left: 76px;
						width: 40px;
						height: 32px;
						margin-top: 0;
					}
					@media (max-width: 767px) {
						padding: 8px 8px 8px 76px;
						.image {
							top: 1px;
							left: 30px;
						}
					}
				}
			}
		}

		&.open, &.static {
			& > .menu-item {
				.fa-angle-down {
					@include transform(translateY(-50%) rotate(180deg));
				}
			}
			.menu-sublist {
				display: block;
			}
		}

		&.li-highlight {
			background: $color_gray_05;
		}

		&.li-highlight-border {
			border: 2px solid lighten($blue, 30%);
		}
	}
	&.menu-categories_b {
		& > li {
			border: 0 !important;
		}
	}
}