// ELEMENT: Select.
// $sui-wrap: true | $rtl: false
@include body-class(true, false) {

	select:not(.sui-select):not(.sui-variables) {
		width: 100%;
		cursor: pointer;
		display: block;
		appearance: none;
		margin: 5px 0;
		padding: 8px 14px;
		padding-right: 40px;
		border: 1px solid palette(gray, lighter);
		border-radius: $border-radius;
		@include background-2x("#{$sui-image-path}select-arrow", 'png', 12px, 12px, right 14px center, no-repeat);
		color: palette(gray, dark);
		font: 500 15px/22px $font;
		letter-spacing: -0.2px;
		transition: $transition;

		// FIX: Hide the default arrow in IE 10+.
		&::-ms-expand {
			display: none;
		}

		&,
		&:hover,
		&:focus {
			background-color: #FAFAFA;
		}

		&:focus {
			background-color: $white;
		}

		&:focus {
			outline: none;
			box-shadow: none;
		}

		// SIZE: Small.
		&.sui-select-sm {
			padding: 6px 12px;
			padding-right: 40px;
			font-size: 13px;
			line-height: 16px;
			background-position: right 8px center;
		}

		// DESIGN: Inline.
		&.sui-select-inline {
			width: auto;
			max-width: 100%;
			display: inline-block;
			margin-right: 10px;

			&:last-child {
				margin-right: 0;
			}
		}

		// STYLE: Multi Select.
		&[multiple] {
			padding: 10px 0;
			background-image: none;
			background-color: $white;

			option {
				padding: 8px;
				background-color: $white;
				color: palette(gray, dark);
				font: 500 15px/35px $font;
				letter-spacing: -0.2px;

				&:hover {
					background-color: #FAFAFA;
				}

				&:checked {
					background-color: palette(gray, light);
					color: $white;
				}
			}
		}

		// STATE: Disabled.
		&[disabled] {
			pointer-events: none;
		}

		&:first-child {
			margin-top: 0;
		}

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

// $sui-wrap: true | $rtl: false | $monochrome: true
@include body-class(true, false, true) {

	select:not(.sui-select):not(.sui-variables) {
		border-color: $black;
		color: $black;

		&,
		&:hover,
		&:focus {
			background-color: $white;
		}

		// STYLE: Multi Select.
		&[multiple] {
			background-color: $white;

			option {
				background-color: $white;
				color: $black;

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

				&:checked {
					background-color: $black;
					color: $white;
				}
			}
		}
	}
}