/**
 * Option select
 *
 * Description: A component to be used instead of selects.
 * -----------------------------------------------------------------------------
 */

/**
 * Table of Contents:
 *
 * 1.0 - Option select
 *   1.1 - Option select (no js)
 * 2.0 - Option select dropdown
 * -----------------------------------------------------------------------------
 */


/**
 * 1.0 - Option select
 * -----------------------------------------------------------------------------
 */

.option-select {
	background-color: $grey-lighter;
	border: 2px solid $grey-dark;
	border-radius: $border-radius;
	display: block;

	@media (min-width: $device-medium-max) {
		/* Redefine scrollbars on desktop where these lists are scrollable
		so they are always visible in option lists */
		::-webkit-scrollbar {
			-webkit-appearance: none;
			width: em(10px);
		}
		::-webkit-scrollbar-thumb {
			border-radius: em(5px);
			background-color: rgba(0, 0, 0, .5);
			-webkit-box-shadow: 0 0 em(1px) rgba(255, 255, 255, .5);
		}
	}

	.option-select-label {
		@include clearfix();
		@include font-size($p-sizes);
		position: relative;
		display: block;
		padding: em(11px) em(5px) em(11px) em(15px);
		font-weight: 600;
		color: $text-color;
		margin: 0 !important;
		border: 0;
		width: 100%;
		float: left; // To reset legend style.

		button {
			box-sizing: content-box;
			color: $text-color;
			padding: em(11px) em(5px) em(11px) em(15px);
			margin: em(-11px) em(-5px) em(-11px) em(-15px);
			display: block;
			width: 100%;
			text-align: left;
			border-radius: 0;
			border-radius: $border-radius;

			&:hover {
				background-color: $grey-light; 
			}

			&:active {
				background-color: shade($grey-light, 95%); 
			}
		}

		.icon {
			position: absolute;
			font-size: em(30px);
			font-weight: 200;
			top: em(10px, 30px);
			right: em(14px, 30px);
			vertical-align: top;
		}
	}

	.options-container {
		background-color: $white;
		margin: em(13px) em(13px) em(19px);
		border: 1px solid $grey-light;
		overflow-y: auto;
		overflow-x: hidden;

		&:focus {
			outline: none;
		}

		&[aria-hidden="true"] {
			border: 0;
		}

		@media (min-width: $device-medium-max) {
			max-height: em(820px);
		}

		label {
			display: block;
			padding: em(7px) 0 em(7px) em(35px);
			border-bottom: 1px solid $grey-lighter;
			width: 100%;
			cursor:pointer;

			&:hover {
				background-color: $tan-lightest;
			}

			&:last-child {
				border-bottom: 0;
			}

			@media (min-width: $device-medium-max) {
				/* leave room for the scroll bars on desktop*/
				margin-right: em(7px);
			}

			input {
				float: left;
				margin: em(3px) 0 0 em(-27px);
				width: em(20px);
				height: em(20px);
			}
		}
	}
}


/**
 * 1.1 - Option select (no js)
 * -----------------------------------------------------------------------------
 */

html.no-js {
	.option-select {
		.option-select-label {
			float: none;
		}

		.expandable {
			position: relative;
			height: auto;
			visibility: visible;
			opacity: 1;
		}
	}
}



/**
 * 2.0 - Option select dropdown
 * -----------------------------------------------------------------------------
 */

.option-select.option-select-dropdown {
	position: relative;

	.options-container {
		position: absolute;
		z-index: 100;
		width: 100%;
		top: em(34px);
		left: em(-12px);
		transition: visibility 0s, opacity 0.2s linear;
	}
}