//  =================
//      Imports
//  =================

@import '../../assets/base/color_variables';    // Color Variables
@import '../../assets/base/fonticons';              // Fonticons Variables
@import '../../assets/base/urls';                   // URLS Variables
@import '../../assets/base/utilities_variables';  // Utilities Variables

.ms-container {
	background: $color_none url('switch.png') no-repeat 50% 50%;
	width: 100%;
	margin: $m-0 auto;
	&:after {
		content: ".";
		display: block;
		height: 0;
		line-height: 0;
		font-size: 0;
		clear: both;
		min-height: 0;
		visibility: hidden;
	}
	.ms-selectable {
		background: $white;
		color: $color_197;
		float: $align-left;
		width: 45%;
		li.ms-elem-selectable {
			border-bottom: $b-width-1 $light-gray $solid;
			padding: 2px $p-10;
			color: $color_325;
			font-size: 14px;
		}
		li.ms-hover {
			cursor: pointer;
			color: $white;
			text-decoration: none;
			background-color: $color_86;
		}
		li.disabled {
			background-color: $light-gray;
			color: $color_137;
			cursor: text;
		}
	}
	.ms-selection {
		background: $white;
		color: $color_197;
		float: $align-left;
		width: 45%;
		float: $align-right;
		li.ms-elem-selection {
			border-bottom: $b-width-1 $light-gray $solid;
			padding: 2px $p-10;
			color: $color_325;
			font-size: 14px;
		}
		li.ms-hover {
			cursor: pointer;
			color: $white;
			text-decoration: none;
			background-color: $color_59;
		}
		li.disabled {
			background-color: $light-gray;
			color: $color_137;
			cursor: text;
		}
	}
	.ms-list {
		-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
		-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
		-ms-transition: border linear 0.2s, box-shadow linear 0.2s;
		-o-transition: border linear 0.2s, box-shadow linear 0.2s;
		transition: border linear 0.2s, box-shadow linear 0.2s;
		border: $b-width-1 $solid $light-gray-3;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
		position: $pos-rel;
		height: 200px;
		padding: $p-0;
		overflow-y: auto;
	}
	.ms-list.ms-focus {
		border-color: $color_57;
		outline: 0;
		outline: thin dotted \9;
	}
	ul {
		margin: $m-0;
		list-style-type: none;
		padding: $p-0;
	}
	.ms-optgroup-container {
		width: 100%;
	}
	.ms-optgroup-label {
		margin: $m-0;
		padding: $p-5 $p-0 $p-0 $p-5;
		cursor: pointer;
		color: $color_299;
	}
}