@use "../../colors/colors.scss";

@mixin d2l-input-select() {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-origin: border-box;
	background-position: center right 17px;
	background-repeat: no-repeat;
	background-size: 11px 7px;
	border-radius: 0.3rem;
	border-style: solid;
	box-sizing: border-box;
	color: colors.$d2l-color-ferrite;
	display: inline-block;
	font-family: inherit;
	font-size: 0.8rem;
	font-weight: 400;
	height: auto;
	letter-spacing: 0.02rem;
	line-height: 1.2rem;
	margin: 0;
	max-height: calc(2rem + 2px);
	vertical-align: middle;
	&,
	&:hover:disabled {
		background-color: #ffffff;
		border-color: colors.$d2l-color-galena;
		border-width: 1px;
		box-shadow: inset 0 2px 0 0 rgba(177, 185, 190, 0.2); /* corundum */
		padding: 0.4rem 0.75rem;
	}
	&,
	&:disabled,
	&:hover:disabled,
	&:focus:disabled {
		background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDExIDciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTEgMmw0LjUgNE0xMCAyTDUuNSA2IiBzdHJva2U9IiM1NjVBNUMiIHN0cm9rZS13aWR0aD0iMiIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPC9zdmc+");
	}
	&,
	&:disabled,
	&:hover:disabled,
	&:focus:disabled {
		padding-right: calc(2px + 0.8rem + 1px + 11px + 16px);
	}
	&:hover,
	&:focus {
		border-color: colors.$d2l-color-celestine;
		border-width: 2px;
		outline: none;
		padding: calc(0.4rem - 1px) calc(0.75rem - 1px);
		padding-right: calc(2px + 0.8rem + 1px + 11px + 16px - 1px);
	}
	&[aria-invalid="true"] {
		background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDExIDciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTEgMmw0LjUgNE0xMCAyTDUuNSA2IiBzdHJva2U9IiM1NjVBNUMiIHN0cm9rZS13aWR0aD0iMiIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPC9zdmc+"), url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDE4IDE4Ij4KICA8cGF0aCBmaWxsPSIjY2QyMDI2IiBkPSJNMTcuNzkgMTUuMTFsLTctMTRhMiAyIDAgMCAwLTMuNTggMGwtNyAxNGExLjk3NSAxLjk3NSAwIDAgMCAuMDkgMS45NEEyIDIgMCAwIDAgMiAxOGgxNGExLjk5NCAxLjk5NCAwIDAgMCAxLjctLjk1IDEuOTY3IDEuOTY3IDAgMCAwIC4wOS0xLjk0ek05IDE2YTEuNSAxLjUgMCAxIDEgMS41LTEuNUExLjUgMS41IDAgMCAxIDkgMTZ6bS45OC00LjgwNmExIDEgMCAwIDEtMS45NiAwbC0uOTktNUExIDEgMCAwIDEgOC4wMSA1aDEuOTgzYTEgMSAwIDAgMSAuOTggMS4xOTR6Ii8+Cjwvc3ZnPgo=");
		background-position: center right 17px, center right calc(1px + 11px + 17px);
		background-repeat: no-repeat, no-repeat;
		background-size: 11px 7px, 0.8rem 0.8rem;
		border-color: colors.$d2l-color-cinnabar;
	}
	&:disabled {
		opacity: 0.5;
	}
	/* IE11 to prevent selection styling */
	&:focus::-ms-value,
	&:hover::-ms-value {
		background-color: transparent;
		color: colors.$d2l-color-ferrite;
	}
	/* IE11 to hide the native chevron */
	&::-ms-expand {
		display: none;
	}
	/* Prevents dotted outline when focused in Firefox */
	&:-moz-focusring {
		color: transparent;
		text-shadow: 0 0 0 #000000;
	}
	[dir="rtl"] & {
		background-position: center left 17px;
		&,
		&:disabled,
		&:hover:disabled,
		&:focus:disabled {
			padding-left: calc(2px + 0.8rem + 1px + 11px + 16px);
			padding-right: 0.75rem;
		}
		&:hover,
		&:focus {
			padding-left: calc(2px + 0.8rem + 1px + 11px + 16px - 1px);
			padding-right: calc(0.75rem - 1px);
		}
		&[aria-invalid="true"] {
			background-position: center left 17px, center left calc(1px + 11px + 17px);
		}
	}
}