*::placeholder {
	color: hsl(211, 10%, 70%);
}

*::-moz-placeholder {
	color: hsl(208, 5%, 46%);
}

*::webkit-input-placeholder {
	color: hsl(211, 10%, 70%);
}

%base-input {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;

	width: 100%;
	height: 100%;
	padding-left: 0.75rem;
	padding-right: 0.75rem;

	background-color: white;

	font-size: 0.9375rem; // 15px
	vertical-align: top;

	border-radius: inherit;
	border: 1px solid hsl(216, 15%, 80%);

	outline: none;

	// size
	&.-big {
		.#{$component-prefix}input,
		.#{$component-prefix}select:not(.-multiple) {
			height: 3rem;
		}
		.#{$component-prefix}input > input,
		.#{$component-prefix}select:not(.-multiple) > select {
			font-size: 1.25rem;
			height: 100%;
		}
	}

	&.-small {
		.#{$component-prefix}input,
		.#{$component-prefix}select:not(.-multiple) {
			height: 1.875em;
		}
		.#{$component-prefix}input > input,
		.#{$component-prefix}select:not(.-multiple) > select {
			font-size: 0.75rem;
			height: 100%;
		}
	}

	&:hover {
		border-color: hsl(216, 15%, 65%);
	}

	&:focus,
	:active {
		border-color: var(--color-primary-400);
		border-width: 1px;
		box-shadow: 0 0 0 0.175rem var(--color-primary-300);
	}
}

$components-colors: ("positive", "negative", "warning", "info");

.#{$component-prefix}field {
	label {
		font-weight: 600;
		display: inline-block;
		margin-bottom: 0.5rem;
		font-size: 0.875rem;
	}

	small {
		display: inline-block;
		margin-top: 0.375rem;
	}

	// color
	@each $key, $value in $components-colors {
		&.-#{$key} {
			.#{$component-prefix}input input,
			.#{$component-prefix}textarea textarea,
			.#{$component-prefix}select select {
				color: var(--color-#{$key}-400);
				border-color: var(--color-#{$key}-200);

				&:focus,
				:active {
					box-shadow: 0 0 0 0.175rem var(--color-#{$key}-100);
				}
			}

			small,
			i {
				color: var(--color-#{$key}-400);
			}
		}
	}

	// size
	&.-big {
		.#{$component-prefix}input,
		.#{$component-prefix}select:not(.-multiple) {
			height: 3rem;
		}

		.#{$component-prefix}input input,
		.#{$component-prefix}select:not(.-multiple) select {
			font-size: 1.25rem;
			height: 100%;
		}
	}

	&.-small {
		.#{$component-prefix}input,
		.#{$component-prefix}select:not(.-multiple) {
			height: 1.875em;
		}

		.#{$component-prefix}input input,
		.#{$component-prefix}select:not(.-multiple) select {
			font-size: 0.75rem;
			height: 100%;
		}
	}

	// disabled
	&.-disabled,
	.disabled,
	[disabled] {
		.#{$component-prefix}input input,
		.#{$component-prefix}textarea textarea,
		.#{$component-prefix}select select {
			cursor: not-allowed;
			background-color: var(--color-neutral-100);
			border-color: var(--color-neutral-300);
			color: var(--color-neutral-400);

			&:hover {
				border-color: var(--color-neutral-300);
			}
		}

		small {
			color: var(--color-text-default-100);
		}
	}

	.fieldset,
	fieldset {
		padding: 1rem;
		border: 1px solid var(--color-neutral-200);
		border-radius: 0.25rem;
	}

	input:not(:placeholder-shown):invalid,
	textarea:not(:placeholder-shown):invalid,
	select:not(:placeholder-shown):invalid {
		color: var(--color-negative-400);
		border-color: var(--color-negative-200);

		&:focus,
		:active {
			box-shadow: 0 0 0 0.175rem var(--color-negative-100);
		}
	}

	.-required {
		label {
			position: relative;

			&:after {
				content: "*";
				display: block;
				position: absolute;
				right: -0.5rem;
				top: 0;

				color: var(--color-negative-200);
			}
		}
	}
}

.#{$component-prefix}input,
.#{$component-prefix}textarea,
.#{$component-prefix}select {
	border-radius: 4px;
}

.#{$component-prefix}input input,
.#{$component-prefix}textarea textarea,
.#{$component-prefix}select select {
	@extend %base-input;
}

.#{$component-prefix}select {
	position: relative;

	select {
		padding-right: 32px;
		cursor: pointer;
	}

	&:after {
		content: "";
		border-left: 2px solid var(--color-neutral-400);
		border-bottom: 2px solid var(--color-neutral-400);
		height: 0.5rem;
		width: 0.5rem;
		position: absolute;
		right: 0.5rem;
		top: 50%;
		border-color: var(--color-neutral-400);
		transform: rotate(-45deg) translate(0, calc(-50% - 4px));
		pointer-events: none;
	}
}

.#{$component-prefix}textarea textarea {
	padding: 8px 0.75rem;
	line-height: 1.25;
}

.#{$component-prefix}input,
.#{$component-prefix}select {
	height: 2.5rem;
}

.#{$component-prefix}radio {
	> input[type="radio"] {
		position: absolute;
		z-index: -1;

		opacity: 0;
		cursor: pointer;
		pointer-events: none;

		&:checked + label:after {
			content: "";
		}

		&:focus {
			+ label:before {
				box-shadow: 0 0 0 0.175rem var(--color-primary-200);
			}
		}
	}

	> label {
		position: relative;
		display: inline-block;
		padding-left: 28px;
		line-height: 21px;
		cursor: pointer;
		user-select: none;

		&:before,
		&:after {
			content: "";
			position: absolute;
			display: inline-block;
		}

		&:before {
			box-sizing: border-box;
			width: 22px;
			height: 22px;
			left: 0px;
			border: 2px solid var(--color-primary-500);
			border-radius: 50%;
			background-color: white;
		}

		&:after {
			content: none;
			height: 0.75rem;
			width: 0.75rem;
			top: 5px;
			left: 5px;
			background-color: var(--color-primary-500);
			border-radius: 50%;
		}
	}
}

.#{$component-prefix}field {
	&.-disabled {
		.#{$component-prefix}radio {
			> label {
				cursor: not-allowed;
				color: var(--color-neutral-400);

				&:before {
					border: 2px solid var(--color-neutral-300);
				}

				&:after {
					background-color: var(--color-neutral-300);
				}
			}
		}
	}
}

.#{$component-prefix}checkbox {
	> input[type="checkbox"] {
		position: absolute;
		opacity: 0;

		cursor: pointer;
		pointer-events: none;

		&:checked {
			+ label:before {
				background: var(--color-primary-500);
				border: 1px solid var(--color-primary-500);
			}

			+ label:after {
				content: "";
			}
		}

		&:focus {
			+ label:before {
				box-shadow: 0 0 0 0.175rem var(--color-primary-200);
			}
		}
	}

	> input[type="checkbox"] + label {
		position: relative;

		display: inline-block;
		height: 100%;

		padding-left: 28px;
		margin-left: -19px;
		line-height: 19px;
		cursor: pointer;

		&:before,
		&:after {
			content: "";
			position: absolute;
			display: inline-block;
		}

		&:before {
			width: 20px;
			height: 20px;
			left: 0px;
			background-color: var(--color-text-invert-100);
			border: 1px solid var(--color-neutral-300);
			border-radius: 4px;
			box-sizing: border-box;
		}

		&:after {
			content: none;
			height: 7px;
			width: 0.75rem;
			top: 5px;
			left: 4px;
			border-left-width: 2px;
			border-bottom-width: 2px;
			border-left-style: solid;
			border-bottom-style: solid;
			border-color: var(--color-text-invert-100);
			transform: rotate(-45deg);
		}

		&:hover:before {
			border: 1px solid var(--color-neutral-400);
		}
	}
}

.#{$component-prefix}toggle-tag {
	> input[type="radio"],
	> input[type="checkbox"] {
		position: absolute;
		z-index: -1;

		opacity: 0;
		cursor: pointer;
		pointer-events: none;

		&:checked + label:after {
			content: "";
		}

		&:focus {
			+ label:before {
				box-shadow: 0 0 0 0.175rem var(--color-primary-200);
			}
		}
	}

	> input[type="radio"] + label,
	> input[type="checkbox"] + label {
		display: flex;
		align-items: center;
		justify-content: center;

		padding: 0.375rem 1rem;

		color: var(--color-text-default-200);
		background: white;

		border: 1px solid var(--color-neutral-300);
		border-radius: 4px;

		font-family: var(--font-family-secondary);

		user-select: none;
		cursor: pointer;

		&:hover {
			background: var(--color-neutral-100);
		}
	}

	> input[type="radio"]:checked + label,
	> input[type="checkbox"]:checked + label {
		color: var(--color-primary-500);
		background: var(--color-primary-100);

		border: 1px solid var(--color-primary-500);
		border-radius: 4px;

		font-family: var(--font-family-secondary);

		cursor: pointer;
	}
}

// Switch
.#{$component-prefix}switch {
	display: inline-flex;
	align-items: center;

	> input[type="checkbox"],
	> input[type="radio"] {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;

		position: relative;
		background-color: hsl(0, 0%, 93%);

		width: 2.75rem;
		height: 26px;
		border-radius: 999px;

		transition: all var(--timing-normal) ease-in-out;
		cursor: pointer;
		outline: none;

		&:checked {
			background-color: var(--color-primary-500);
		}

		&:after {
			content: "";
			position: absolute;
			border-radius: 50%;
			background-color: white;
			height: 2rem;
			width: 2rem;
			left: -2px;
			top: -3px;
			box-shadow: 0 0 7px rgba(0, 0, 0, 0.5);
			transform: scale(0.64);
			transition: all var(--timing-faster) ease-in-out;
		}

		&:checked:after {
			left: calc(100% - 30px);
		}
	}

	> label {
		margin-left: 8px;
	}
}

.#{$component-prefix}field {
	&.-disabled {
		.#{$component-prefix}checkbox {
			opacity: 0.5;

			> input[type="checkbox"],
			> label {
				cursor: not-allowed;

				&:before {
					opacity: 0.5;
					border-color: var(--color-text-default-100);
				}

				&:after {
					opacity: 0.5;
					border-color: var(--color-text-default-100);
				}
			}
		}
	}
}

// input icon
.#{$component-prefix}input.-has-icon-left,
.#{$component-prefix}select.-has-icon-left,
.#{$component-prefix}input.-has-icon-right {
	position: relative;

	> .icon {
		position: absolute;
		top: 0;

		display: flex;
		align-items: center;
		justify-content: center;

		width: 2.625rem;
		height: 100%;

		color: var(--color-neutral-400);

		font-size: 1rem;
	}
}

.#{$component-prefix}input.-has-icon-left {
	> input {
		padding-left: 2.625rem;
	}

	> .icon:not(.-is-right) {
		left: 0;
	}
}

.#{$component-prefix}select.-has-icon-left {
	> select {
		padding-left: 2.625rem;
	}

	> .icon:not(.-is-right) {
		left: 0;
	}
}

.#{$component-prefix}input.-has-icon-right {
	> input {
		padding-right: 2.625rem;
	}

	> .icon.-is-right {
		right: 0;
	}
}

.#{$component-prefix}field.-small {
	.#{$component-prefix}input.-has-icon-left {
		> input {
			padding-left: 2rem;
		}

		> .icon:not(.-is-right) {
			left: 0;

			width: 2rem;

			font-size: 0.875rem;
		}
	}
	.#{$component-prefix}select.-has-icon-left {
		> select {
			padding-left: 2rem;
		}

		> .icon:not(.-is-right) {
			left: 0;

			width: 2rem;

			font-size: 0.875rem;
		}
	}
	.#{$component-prefix}input.-has-icon-right {
		> input {
			padding-right: 2rem;
		}

		> .icon.-is-right {
			right: 0;

			width: 2rem;

			font-size: 0.875rem;
		}
	}
}

.#{$component-prefix}field.-big {
	.#{$component-prefix}input.-has-icon-left {
		> input {
			padding-left: 3rem;
		}

		> .icon:not(.-is-right) {
			left: 0;

			width: 3rem;

			font-size: 1.33333rem;
		}
	}
	.#{$component-prefix}select.-has-icon-left {
		> select {
			padding-left: 3rem;
		}

		> .icon:not(.-is-right) {
			left: 0;

			width: 3rem;

			font-size: 1.33333rem;
		}
	}
	.#{$component-prefix}input.-has-icon-right {
		> input {
			padding-right: 3rem;
		}

		> .icon.-is-right {
			right: 0;

			width: 3rem;

			font-size: 1.33333rem;
		}
	}
}