@use "../../00-base/colors/colors";
@use "../../00-base/mixin/core.mixin";

@mixin base-input {
	font-size: core.px2rem(14px);
	line-height: core.px2rem(30px);

	box-sizing: border-box;
	width: auto;
	margin: 0;
	padding: 0 core.px2rem(8px);

	border: 1px colors.$neutral-500 solid;
	border-radius: 2px;
	outline: 1px rgba(255, 255, 255, 0) solid;
	background-color: colors.$neutral-000;
	color: colors.$neutral-700
}

.hoo-input-text {
	@include base-input();

	font-family: inherit;
	// general focus
	&:focus {
		line-height: calc(core.px2rem(30px) - 2px);

		padding: 0 core.px2rem(7px);

		border: 2px colors.$theme-600 solid;
		outline: 0 rgba(255, 255, 255, 0) solid;
	}

	// in valid 
	&.is-invalid,
	&:not(.is-empty):invalid {
		border-color: colors.$errorText;
	}

	// diabled buttn style
	&:disabled {
		color: colors.$neutral-400;
		border-color: colors.$neutral-100;
		background-color: colors.$neutral-100;
	}

	&[data-prefix] {
		padding-left: core.px2rem(8px);

		border-left: none;
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}

	&[data-suffix] {
		// padding-right: core.px2rem(8px);

		border-right: none;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}
	&[readonly] {
		border-color: transparent;
		padding-inline: 0;
    }
}

textarea.hoo-input-text{
	line-height: 1.5;
	&:focus{
		line-height: 1.5;
	}
}

.hoo-input-prefix {
	@include base-input();

	display: inline-block;

	box-sizing: border-box;

	color: colors.$neutral-700;
	border-right: none;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	background-color: colors.$neutral-100;
}

.hoo-input-suffix {
	@include base-input();

	display: inline-block;

	box-sizing: border-box;

	color: colors.$neutral-700;
	border-left: none;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	background-color: colors.$neutral-100;
}

input[type="number"] {
	line-height: 1.9rem;

	min-width: core.px2rem(100px);
	padding-right: 0;

	div:last-child {
		margin-top: core.px2rem(-8px);
		margin-bottom: core.px2rem(-8px);
	}

	&:hover,
	&:focus {
		padding-right: 0;
	}

	/*** Web Kif Fixup **/
	&::-webkit-inner-spin-button {
		margin-left: 8px;
	}
}

input[type="color"].hoo-input-color {
	-webkit-appearance: none;
	height: 2rem;
	width: 2rem;
	padding: 0;
	border: 1px colors.$neutral-450 solid;
	border-radius: colors.$roundedCorner2;


	&::-webkit-color-swatch-wrapper {
		padding: 0.25rem;
	}

	&::-moz-color-swatch {
		height: calc(2rem - 0.5rem);
		width: calc(2rem - 0.5rem);
		border: none;
	}

	&::-webkit-color-swatch {
		border: none;
	}

}

.hoo-input-group {
	display: flex;

	&:focus-within {
		&>* {
			line-height: calc(1.9rem - 2px);

			padding: 0 core.px2rem(7px);

			border-width: 2px;
			border-color: colors.$theme-600;
		}

		.hoo-input-text {
			padding: 0 core.px2rem(8px);
			&[type="number"] {
				padding-right: 0;
			}
		}

		.hoo-input-suffix {
			padding-right: core.px2rem(7px);
			padding-left: core.px2rem(8px);
		}

		.hoo-input-prefix {
			padding-right: core.px2rem(8px);
			padding-left: core.px2rem(7px);
		}
	}
}

.hoo-input-time,
.hoo-input-date {
	font-family: colors.$mediumFontFamily;
	font-size: core.px2rem(14px);
	line-height: core.px2rem(28px);

	padding-right: core.px2rem(4px);
	padding-left: core.px2rem(8px);

	color: colors.$neutral-700;

	&[readonly]{
		padding-inline: 0;
		border-color: transparent;
	}

	&:focus {
		border-color: transparent;
		outline: 2px colors.$theme-600 solid;
	}

	&::-webkit-calendar-picker-indicator {
		margin-right: 0;
		margin-left: core.px2rem(8px);
		height: 1.2em;
		width: 1.2rem;
		padding-inline-start: core.px2rem(2px);
		padding-inline-end: core.px2rem(2px);
		padding-inline-start: core.px2rem(2px);
		padding-inline-start: core.px2rem(2px);
	}
}

.hoo-input-time {
	&::-webkit-calendar-picker-indicator {
		background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbi1jYWxlbmRhci1sdHItcmVndWxhciIgdmlld0JveD0iMCAwIDMyIDMyIgphcmlhLWhpZGRlbj0idHJ1ZSIgc3R5bGU9InBvc2l0aW9uOiBhYnNvbHV0ZTsgd2lkdGg6IDA7IGhlaWdodDogMDsgb3ZlcmZsb3c6IGhpZGRlbjsiIHZlcnNpb249IjEuMSIKICAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KPHBhdGggZD0iTTE2IDMuMzMzYzYuOTk1IDAgMTIuNjY3IDUuNjcxIDEyLjY2NyAxMi42NjdzLTUuNjcxIDEyLjY2Ny0xMi42NjcgMTIuNjY3LTEyLjY2Ny01LjY3MS0xMi42NjctMTIuNjY3IDUuNjcxLTEyLjY2NyAxMi42NjctMTIuNjY3ek0xNiA1Yy02LjA3NSAwLTExIDQuOTI1LTExIDExczQuOTI1IDExIDExIDExIDExLTQuOTI1IDExLTExLTQuOTI1LTExLTExLTExek0xNS4xNjcgOGMwLjQzMSAwIDAuNzg3IDAuMzI4IDAuODI5IDAuNzQ4bDAuMDA0IDAuMDg1djcuMTY3aDQuNWMwLjAwMSAwIDAuMDAzIDAgMC4wMDQgMCAwLjQ2IDAgMC44MzMgMC4zNzMgMC44MzMgMC44MzMgMCAwLjQzMi0wLjMyOCAwLjc4Ny0wLjc0OCAwLjgyOWwtMC4wMDMgMC0wLjA4NSAwLjAwNGgtNS4zMzNjLTAgMC0wIDAtMCAwLTAuNDMgMC0wLjc4NC0wLjMyNi0wLjgyOS0wLjc0NGwtMC0wLjAwNC0wLjAwNC0wLjA4NXYtOGMwLTAuNDYgMC4zNzMtMC44MzMgMC44MzMtMC44MzN6IiBmaWxsPSJjdXJyZW50Q29sb3IiPjwvcGF0aD4KPC9zdmc+");
	}

}

.hoo-input-date {
	&::-webkit-calendar-picker-indicator {
		background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbi1jYWxlbmRhci1sdHItcmVndWxhciIgdmlld0JveD0iMCAwIDMyIDMyIgphcmlhLWhpZGRlbj0idHJ1ZSIgc3R5bGU9InBvc2l0aW9uOiBhYnNvbHV0ZTsgd2lkdGg6IDA7IGhlaWdodDogMDsgb3ZlcmZsb3c6IGhpZGRlbjsiIHZlcnNpb249IjEuMSIKICAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KPHBhdGggZD0iTTEwLjMzMyAxNy4zMzNjMC45MiAwIDEuNjY3LTAuNzQ2IDEuNjY3LTEuNjY3cy0wLjc0Ni0xLjY2Ny0xLjY2Ny0xLjY2N3YwYy0wLjkyIDAtMS42NjcgMC43NDYtMS42NjcgMS42NjdzMC43NDYgMS42NjcgMS42NjcgMS42Njd2MHpNMTcuNjY3IDE1LjY2N2MwIDAuOTItMC43NDYgMS42NjctMS42NjcgMS42NjdzLTEuNjY3LTAuNzQ2LTEuNjY3LTEuNjY3djBjMC0wLjkyIDAuNzQ2LTEuNjY3IDEuNjY3LTEuNjY3czEuNjY3IDAuNzQ2IDEuNjY3IDEuNjY3djB6TTIxLjY2NyAxNy4zMzNjMC45MiAwIDEuNjY3LTAuNzQ2IDEuNjY3LTEuNjY3cy0wLjc0Ni0xLjY2Ny0xLjY2Ny0xLjY2N3YwYy0wLjkyIDAtMS42NjcgMC43NDYtMS42NjcgMS42NjdzMC43NDYgMS42NjcgMS42NjcgMS42Njd2MHpNMTIgMjFjMCAwLjkyLTAuNzQ2IDEuNjY3LTEuNjY3IDEuNjY3cy0xLjY2Ny0wLjc0Ni0xLjY2Ny0xLjY2N3YwYzAtMC45MiAwLjc0Ni0xLjY2NyAxLjY2Ny0xLjY2N3MxLjY2NyAwLjc0NiAxLjY2NyAxLjY2N3Ywek0xNiAyMi42NjdjMC45MiAwIDEuNjY3LTAuNzQ2IDEuNjY3LTEuNjY3cy0wLjc0Ni0xLjY2Ny0xLjY2Ny0xLjY2N3YwYy0wLjkyIDAtMS42NjcgMC43NDYtMS42NjcgMS42NjdzMC43NDYgMS42NjcgMS42NjcgMS42Njd2MHpNNCA4LjE2N2MwLTIuMzAxIDEuODY1LTQuMTY3IDQuMTY3LTQuMTY3djBoMTUuNjY3YzIuMzAxIDAgNC4xNjcgMS44NjUgNC4xNjcgNC4xNjd2MCAxNS42NjdjMCAyLjMwMS0xLjg2NSA0LjE2Ny00LjE2NyA0LjE2N3YwaC0xNS42NjdjLTIuMzAxIDAtNC4xNjctMS44NjUtNC4xNjctNC4xNjd2MC0xNS42Njd6TTguMTY3IDUuNjY3Yy0xLjM4MSAwLTIuNSAxLjExOS0yLjUgMi41djAgMS4xNjdoMjAuNjY3di0xLjE2N2MwLTEuMzgxLTEuMTE5LTIuNS0yLjUtMi41djBoLTE1LjY2N3pNNS42NjcgMjMuODMzYzAgMS4zODEgMS4xMTkgMi41IDIuNSAyLjV2MGgxNS42NjdjMS4zODEgMCAyLjUtMS4xMTkgMi41LTIuNXYwLTEyLjgzM2gtMjAuNjY3djEyLjgzM3oiIGZpbGw9ImN1cnJlbnRDb2xvciI+PC9wYXRoPgo8L3N2Zz4=");
	}
}