#context-menu {
	position: fixed;
	z-index: 99;

	.liner {
		background: $dark_grey;
		color: #FFFFFF;
		width: 160px;

		.title {
			display: block;
			padding: 8px 12px;
			font-weight: bold;
			box-sizing: border-box;
			position: relative;
			overflow: hidden;
			text-decoration: none;
			background: $darkest_grey;

			.background {
				@include blur(5px);
				background-size: cover;
				background-position: 50% 20%;
				opacity: 0.65;
				position: absolute;
				top: -10px;
				left: -10px;
				bottom: -10px;
				right: -10px;
				z-index: 1;

				&.generic {
					opacity: 0.9;
					background: rgba(50,181,242,1);
					background: -moz-linear-gradient(45deg, rgba(50,181,242,1) 0%, rgba(50,181,242,1) 18%, rgba(5,118,166,1) 100%);
					background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(50,181,242,1)), color-stop(18%, rgba(50,181,242,1)), color-stop(100%, rgba(5,118,166,1)));
					background: -webkit-linear-gradient(45deg, rgba(50,181,242,1) 0%, rgba(50,181,242,1) 18%, rgba(5,118,166,1) 100%);
					background: -o-linear-gradient(45deg, rgba(50,181,242,1) 0%, rgba(50,181,242,1) 18%, rgba(5,118,166,1) 100%);
					background: -ms-linear-gradient(45deg, rgba(50,181,242,1) 0%, rgba(50,181,242,1) 18%, rgba(5,118,166,1) 100%);
					background: linear-gradient(45deg, rgba(50,181,242,1) 0%, rgba(50,181,242,1) 18%, rgba(5,118,166,1) 100%);
					filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#32b5f2', endColorstr='#0576a6', GradientType=1 );
				}
			}

			.text {
				@include one_line_text();
				position: relative;
				z-index: 2;
				color: #FFFFFF;
			}

			.type {
				position: relative;
				z-index: 2;
				color: #FFFFFF;
				opacity: 0.5;
				font-weight: 200;
				text-transform: capitalize;
			}

			.notouch &:hover{
				.background {
					opacity: 0.7;
				}
			}
		}

		.menu-item-wrapper {
			display: block;
			overflow-x: hidden;

			.menu-item {
				cursor: pointer;
				display: block;
				padding: 12px 14px;
				box-sizing: border-box;

				.notouch &:hover {
					background: lighten($dark_grey, 5%);
				}
			}

			.icon {
				display: none;
			}

			.submenu-icon {
				float: right;
				padding-top: 4px;
			}

			.fa {
				font-size: 10px;
			}

			.submenu {
				@include animate();
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 100%;
				width: 0;
				height: 100%;
				overflow-y: scroll;			
				background: lighten($dark_grey, 15%);
				z-index: 3;

				&.expanded {
					width: 100%;
					left: 0;
				}

				.menu-item {
					width: 100%;

					&.close-submenu {
						background: $dark_grey;
						border-top: 0;
						color: $mid_grey;
					}

					.notouch &:hover {
						background: lighten($dark_grey, 15%);
					}
				}
			}

			&:not(:first-child){
				.menu-item {
					border-top: 1px solid lighten($dark_grey, 8%);
				}
			}
		}

		& > span {
			display: block;

			button,
			.button,
			.dropdown-field {
				text-decoration: none;
				display: block;
				border: 0;
				margin: 0;
				min-width: 100% !important;
				max-width: 100% !important;
				box-sizing: border-box;
				font-size: inherit;
				text-align: left;
				text-transform: none;
				font-weight: 300;
				color: inherit;

				&:not(:first-child){
					border-top: 1px solid lighten($dark_grey, 8%);
				}

				.fa {
					display: none;
				}

				.notouch &:hover {
					background: lighten($dark_grey, 5%);
				}
			}

			button,
			.button {
				padding: 16px 20px;
				min-width: 100% !important;
				max-width: 100% !important;
			}	

			.dropdown-field {
				padding: 0;

				.label {
					padding: 16px 20px;
				}

				.options {
					display: block;
					position: static;
					background: darken($dark_grey, 5%);

					.option {
						padding: 12px 20px 12px 50px;
						border-top: 1px solid $dark_grey;

						.fa {
							display: inline-block;
							left: 25px;
							top: 14px;
						}
					}
				}
			}			
		}
	}

	@include responsive( null, $bp_medium ){
		.liner {
			.title {
				display: none;
			}
		}
	}

	@include responsive( $bp_medium ){
		top: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		left: 0 !important;
		margin: 0 !important;
		overflow-y: scroll;

		.background {
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background: rgba(10, 10, 10, 0.95);
			z-index: 1;
		}

		.liner {
			width: 250px;
			margin: 30px auto;
			max-width: 90vw;
			position: relative;
			z-index: 2;

			.title {				
				padding: 16px 20px;
				box-sizing: border-box;
			}

			.menu-item-wrapper {
				.menu-item {
					padding: 16px 20px;
					box-sizing: border-box;
				}
			}
		}
	}
}

.context-menu-trigger {
	padding: 8px 12px;
	font-size: 18px;
	cursor: pointer;
	vertical-align: middle;
	margin-left: 10px;

	&:hover {
		color: $turquoise;
	}
}

.list {	
	&.track-list {

		.context-menu-trigger {	
			display: none;
		}
		
		@include responsive( $bp_medium ){

			.context-menu-trigger {	
				display: block;
				position: fixed;
				bottom: 50px;
				right: 5px;
				width: 50px;
				height: 50px;
				overflow: hidden;
				z-index: 97;
				border-radius: 50%;
				background: $blue;
				color: #FFFFFF;
				
				&:focus,
				&:active {
					background: darken($blue, 10%);
				}
			}
		}
	}
}