@import '../styles/variables';

.Input {
	--icon-container-width: 36px;
	--view-width: 38px;
	display: inline-block;
	margin: 5px 0;
	position: relative;
	width: 100%;

	&-wrap {
		display: inline-block;
		width: 100%;
		position: relative;
	}

	input[type='number']::-webkit-inner-spin-button,
	input[type='number']::-webkit-outer-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}

	input,
	textarea {
		display: inline-block;
		width: 100%;
		height: 36px;
		min-width: 100px;
		padding: 7px 10px;
		border: 1px solid var(--input-border-color);
		border-radius: 4px;
		position: relative;
		color: #90959d;
		background: var(--input-background-color);
		outline: none;
		font-family: inherit;
		font-size: 14px;
		font-weight: 600;
		text-align: left;
		line-height: 21px;
		transition: 0.2s ease;

		&::-webkit-input-placeholder {
			color: var(--text-color);
			font-weight: normal;
		}

		&:hover {
			border-color: var(--input-lighter-border-color);
		}

		&:focus {
			border: 1px solid #687bf7;
			color: var(--text-color2);
		}
	}

	&--icon {
		input,
		textarea {
			padding-left: calc(var(--icon-container-width) - 2px);
		}
	}

	&__icon {
		@include center-vertically;
		left: 0;
		width: var(--icon-container-width);

		img {
			display: block;
			margin: 0 auto;
		}
	}

	&--view {
		input {
			padding-right: calc(var(--view-width) + 4px);
		}
	}

	&__view {
		display: flex;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: var(--view-width);
		user-select: none;
		cursor: default;
		text-align: center;

		> * {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			align-self: center;
			line-height: 1;
			font-size: 14px;
			color: var(--text-color);
		}

		// If the given button contains an image, we fix it
		img {
			display: block;
			margin: 0;
			padding: 0;
		}

		&::after {
			content: ' ';
			position: absolute;
			top: 1px;
			right: 0;
			bottom: 1px;
			left: 0;
			border-left: 1px solid var(--input-border-color);
		}
	}

	&__button {
		> * {
			opacity: 0.5;
			transition: opacity 0.2s ease-out;
		}

		&:hover > * {
			opacity: 1;
			position: relative;
			z-index: 1;
		}
	}

	&__text {
		display: block;
		position: absolute;
		overflow: hidden;

		p {
			margin: 0;
			color: var(--text-color);
			font-size: 12px;
			line-height: 20px;
		}
	}

	&--success {
		input,
		input:hover,
		input:active,
		input:focus,
		textarea,
		textarea:hover,
		textarea:active,
		textarea:focus {
			border-color: var(--success-color);
		}

		.Input__text p {
			color: var(--success-color);
		}
	}

	&--error,
	&--error:hover,
	&--error:focus {
		input,
		input:hover,
		input:active,
		input:focus,
		textarea,
		textarea:hover,
		textarea:active,
		textarea:focus {
			border-color: var(--error-color);
		}

		.Input__text p {
			color: var(--error-color);
		}
	}

	&--warning,
	&--warning:hover,
	&--warning:focus {
		input,
		input:hover,
		input:active,
		input:focus,
		textarea,
		textarea:hover,
		textarea:active,
		textarea:focus {
			border-color: var(--warning-color);
		}

		.Input__text p {
			color: var(--warning-color);
		}
	}

	&--info,
	&--info:hover,
	&--info:focus {
		input,
		input:hover,
		input:active,
		input:focus,
		textarea,
		textarea:hover,
		textarea:active,
		textarea:focus {
			border-color: var(--info-color);
		}

		.Input__text p {
			color: var(--info-color);
		}
	}

	&--readonly {
		pointer-events: none;
		cursor: default;
		user-select: none;
	}

	&--disabled {
		input,
		input:hover,
		input:active,
		input:focus,
		textarea,
		textarea:hover,
		textarea:active,
		textarea:focus,
		.Input__icon {
			opacity: 0.7;
			pointer-events: none;
			cursor: default;
			user-select: none;
		}
	}
}
