@import "./variables.scss";

@mixin control-disabled() {
	&--disabled {
		cursor: default;
		user-select: none;
		pointer-events: none;
		opacity: 0.5;
	}
}

@mixin input() {
	width: 100%;
	margin: 0;
	padding: 2px 6px;
	height: initial;
	min-height: initial;
	font-size: $font-size;
	line-height: $line-height;
	color: $color-text-primary;
	border: 2px solid $bg-field;
	border-radius: $radius;
	background: $bg-field;
	box-shadow: none;
	outline: none;
	box-sizing: border-box;
}

@mixin input-placeholder() {
	&::-webkit-input-placeholder {
		/* Chrome/Opera/Safari */
		color: $color-placeholder;
	}

	&::-moz-placeholder {
		/* Firefox 19+ */
		color: $color-placeholder;
	}

	&:-ms-input-placeholder {
		/* IE 10+ */
		color: $color-placeholder;
	}

	&:-moz-placeholder {
		/* Firefox 18- */
		color: $color-placeholder;
	}
}

@mixin input-focus() {
	&:focus {
		color: $color-text-focus;
		border-color: $color-accent-focus;
		background-color: $bg-field-focus;
	}
}

@mixin input-cleaning() {
	margin: 0;
	padding: 0;
	height: initial;
	min-height: initial;
	font-size: $font-size;
	line-height: $line-height;
	outline: none;
	border: none;
	background: none;
	box-shadow: none;

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