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

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

		&.right-align {
			margin-left: -160px;
		}

		&.right-align-submenu .submenu {
			left: auto !important;
			right: 160px !important;
		}

		&.bottom-align-submenu .submenu {
			top: auto !important;
			bottom: 0 !important;
		}

		.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.5;
				position: absolute;
				top: -10px;
				left: -10px;
				bottom: -10px;
				right: -10px;
				z-index: 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: 8px 12px;
				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;
				min-height: 180px;
				overflow-y: scroll;			
				background: lighten($dark_grey, 10%);
				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,
			.dropdown-field {
				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 {
				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;
				}
			}
		}
	}
}

.track-list {
	.context-menu-trigger {	
		display: none;
		position: fixed;
		bottom: 55px;
		right: 10px;
		z-index: 97;
		border-radius: 50%;
		background: $blue;
		color: #FFFFFF;
		width: 50px;
		height: 50px;
		overflow: hidden;
		margin: 0;

		&:hover {
			background: $blue;
		}

		&:active {
			background: darken($blue, 10%);
		}

		@include responsive( $bp_medium ){
			display: block;
		}
	}
}