$menu-item-height : 30px;

.x-menu-plain {
	background: $background-color-menu !important;
}
.x-menu {
	box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.60);

	.x-menu-item-active {
		border-color: $grey;
	}

	.x-menu-scroller.x-menu-item-active {
		background-color: $grey4 !important;
	}
	.x-menu-scroller.x-menu-item-active:active {
		background-color: $grey !important;
	}

	background: $background-color-menu;
	border: 1px solid $border-color-menu;

	.x-menu-list {
		padding: $padding-small 0;

		li.x-menu-list-item {
			padding: 0px $padding-small 0 $padding-small;
			border: none;
			border-radius: 0;

			a.x-menu-item {
				line-height: $font-default-line-height;
				padding: ($menu-item-height - $font-default-line-height)/2 $padding-large ($menu-item-height - $font-default-line-height)/2 (20px + 2 * $padding-medium - $padding-small);

				/* icon size is 20px x 20px, icon images are centered in that box */
				.x-menu-item-icon {
					left: $padding-medium - $padding-small;
					cursor: pointer;
				}

				/* rules menu item */
				&.k-rules-menu-item {
					padding-left: $padding-medium;
				}
			}
			a.x-menu-item-arrow {
				background-position: right center !important;
			}
			a.zarafa-no-icon {
				padding-left: $padding-large;
			}
		}

		.x-menu-item-text, .x-menu-item .x-unselectable {
			cursor: pointer;
		}

		li.x-menu-list-item.x-menu-item-active {
			box-shadow: none;

			a {
				background-color: $grey4 !important;
			}
		}

		li.x-menu-list-item.x-menu-item-selected {
			box-shadow: none;
			a {
				background-color: $light-blue;
			}
		}

		li.x-menu-list-item.x-menu-item-active:active {
			a:not(.k-unclickable) {
				background-color: $grey !important;
			}
		}

		li.x-menu-sep-li {
			padding: 0;
			margin: $padding-small 0;

			.x-menu-sep {
				background-color: $grey;
				padding: 0;
				margin: 0;
				border: none;
			}
		}
	}
}

.x-shadow {
	display: none !important;
}

/* menu item icon default width / height */
.x-menu-item-icon {
	height: 20px;
	width: 20px;
	top: 5px;
}

/* Override ExtJS's ugly blue border of an menu item */
li.x-menu-item a.x-menu-item {
	border: none;
}
li.x-menu-item-active a.x-menu-item {
	border: none;
}
li.x-menu-item-active{
	background-image: none;
	background-color: transparent;
}

/* Categorie menu */
.x-menu.k-categories{
	.x-menu-list {
		.x-menu-item {
			svg {
				position: absolute;
				left: $padding-small;
				top: 8px;
			}
		}

		.x-menu-item.k-manage-categories {
			padding-left: $padding-medium;
		}
	}
}

.x-menu-item-selected {
	background-color: $light-blue;
	border-bottom: 1px solid $background-color-menu !important;
}

/* Color picker */
.x-color-palette.k-colorpicker-menu {
	width: 108px;
}

.x-menu-check-item.showGroups {
	.k-hide-img {
		display: none !important;
	}
}

.x-menu-check-item.k-unread-filter-btn {
	.k-hide-img {
		display: none !important;
	}
	/*
	.x-menu-item-icon {
		background-position: sprite-position($iconsmap, icon_flag_complete, $offset-y: 6, $offset-x: 2) !important;
	}
	*/
}

.k-selection {
	background-color: $light-blue !important;
}
