@use 'sass:color';

.#{ $formbase__prefix }input {

	appearance: none;
	box-sizing: border-box;
	width: 100%;
	margin: 0 0 $formbase__margin;
	padding: $formbase__padding;
	background: $formbase__background;
	border: 1px solid $formbase__border;
	box-shadow: $formbase__shadow;
	border-radius: $formbase__radius;
	outline: none;
	resize: vertical;
	transition: border-color $formbase__duration $formbase__timing;
	color: $formbase__color;
	// Consistent font styles for all browsers
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;

	&[disabled] {
		border-color: color.adjust($formbase__border, $lightness: 5%);
		background-color: color.adjust($formbase__background, $lightness: -5%);
		box-shadow: none;
		cursor: not-allowed;
		color: color.adjust($formbase__color, $lightness: 5%);
	}

	&:focus {
		border-color: $formbase__active;
	}

	// Chrome, Firefox, Opera and Safari
	&::placeholder {
		color: $formbase__placeholder;
		// Reset opacity for Firefox
		opacity: 1;
	}

	// Internet Explorer
	&:-ms-input-placeholder {
		color: $formbase__placeholder;
	}

	// Edge
	&::-ms-input-placeholder {
		color: $formbase__placeholder;
	}

}