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

@mixin d2l-input-text(
		$include-pseudo-classes: true,
		$line-height: 1.2rem,
		$padding: 0.4rem 0.75rem,
		$padding-focus: calc(0.4rem - 1px) calc(0.75rem - 1px)
	) {
	background-color: #ffffff;
	border-radius: 0.3rem;
	border-style: solid;
	border-width: 1px;
	box-shadow: inset 0 2px 0 0 rgba(177, 185, 190, 0.2), /* corundum */;
	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: $line-height;
	margin: 0;
	min-width: calc(2rem + 1em);
	position: relative;
	vertical-align: middle;
	width: 100%;
	&::placeholder,
	&::-ms-input-placeholder {
		color: colors.$d2l-color-galena;
		font-size: 0.8rem;
		font-weight: 400;
		opacity: 1; /* Firefox has non-1 default */
	}
	&:hover,
	&:focus {
		border-color: colors.$d2l-color-celestine;
		border-width: 2px;
		outline: none;
		padding: $padding-focus;
	}
	&[aria-invalid="true"] {
		border-color: colors.$d2l-color-cinnabar;
	}
	&,
	&:hover:disabled,
	&[aria-invalid="true"]:disabled {
		border-color: colors.$d2l-color-galena;
		border-width: 1px;
		padding: $padding;
	}
	&:disabled {
		opacity: 0.5;
	}
	@if $include-pseudo-classes {
		&::-webkit-search-cancel-button,
		&::-webkit-search-decoration {
			display: none;
		}
		&::-ms-clear {
			display: none;
			height: 0;
			width: 0;
		}
	}
}