/* 입력 필드 / 텍스트 영역 */
//사이즈 정의
@mixin input-size-variable() {
	$input-size: (
		small: (
			size-height: var(--krds-size-height-6),
			radius: var(--krds-radius-medium1),
			pc-font-size: var(--krds-pc-font-size-label-small),
			mobile-font-size: var(--krds-mobile-font-size-label-small),
		),
		medium: (
			size-height: var(--krds-size-height-7),
			radius: var(--krds-radius-medium2),
			pc-font-size: var(--krds-pc-font-size-label-medium),
			mobile-font-size: var(--krds-mobile-font-size-label-medium),
		),
		large: (
			size-height: var(--krds-size-height-8),
			radius: var(--krds-radius-medium3),
			pc-font-size: var(--krds-pc-font-size-label-large),
			mobile-font-size: var(--krds-mobile-font-size-label-large),
		),
		xlarge: (
			size-height: var(--krds-size-height-11),
			radius: var(--krds-radius-large2),
			pc-font-size: var(--krds-pc-font-size-heading-medium),
			mobile-font-size: var(--krds-mobile-font-size-heading-medium),
		),
	) !default;

	//css variable 생성
	--krds-input--padding-x: var(--krds-padding-6);
	@each $size, $types in $input-size {
		@each $type, $value in $types {
			//css variable 생성
			--krds-input--#{$type}-#{$size}: #{$value};
		}
	}

	//class 정의
	& {
		@include input-size(large);

		@each $size, $types in $input-size {
			&.#{$size} {
				@include input-size(#{$size});
			}
		}
	}
}

@mixin input-size($unit) {
	height: var(--krds-input--size-height-#{$unit});
	border-radius: var(--krds-input--radius-#{$unit});
	font-size: var(--krds-input--pc-font-size-#{$unit});
	@if ($unit == 'xlarge') {
		font-weight: var(--krds-font-weight-bold);
	}
	@include size-medium {
		font-size: var(--krds-input--mobile-font-size-#{$unit});
	}
}

//컬러 정의
@mixin input-color-variable($mode: light) {
	--krds-input--color-surface: var(--krds-#{$mode}-color-input-surface);
	--krds-input--color-surface-readonly: var(--krds-#{$mode}-color-input-surface-disabled);
	--krds-input--color-surface-disabled: var(--krds-#{$mode}-color-input-surface-disabled);
	--krds-input--color-surface-error: var(--krds-#{$mode}-color-input-surface);
	--krds-input--color-border: var(--krds-#{$mode}-color-input-border);
	--krds-input--color-border-active: var(--krds-#{$mode}-color-input-border-active);
	--krds-input--color-border-readonly: var(--krds-#{$mode}-color-input-border-disabled);
	--krds-input--color-border-disabled: var(--krds-#{$mode}-color-input-border-disabled);
	--krds-input--color-border-error: var(--krds-#{$mode}-color-input-border-error);
	--krds-input--color-text: var(--krds-#{$mode}-color-text-subtle);
	--krds-input--color-text-active: var(--krds-#{$mode}-color-text-basic);
	--krds-input--color-text-readonly: var(--krds-#{$mode}-color-text-subtle);
	--krds-input--color-text-disabled: var(--krds-#{$mode}-color-text-disabled-on);
	--krds-input--color-text-placeholder: var(--krds-#{$mode}-color-text-disabled);
	--krds-input--color-text-error: var(--krds-#{$mode}-color-text-subtle);
}

//모드 설정
$mode-setting: light;
.krds-input {
	@include input-color-variable($mode: #{$mode-setting});
	@include input-size-variable();
	
	& {
		//default size large
		position: relative;
		width: 100%;
		padding:0 var(--krds-input--padding-x);
		@include border-size-mode(#{$mode-setting});
		background-color: var(--krds-input--color-surface);
		border: 0.1rem solid var(--krds-input--color-border);
		font-family: inherit;
		color: var(--krds-input--color-text);
		transition: var(--krds-transition-base);
	}
	&:focus,
	&.focus {
		border-color: var(--krds-input--color-border-active);
		border-width: 2px;
		outline: none;
		box-shadow: none;
	}
	&[readonly] {
		background-color: var(--krds-input--color-surface-readonly);
		border-color: var(--krds-input--color-border-readonly);
		color: var(--krds-input--color-text-readonly);
		&.datepicker {
			background-color: var(--krds-input--color-surface);
			border-color: var(--krds-input--color-border );
			color: var(--krds-input--color-text);
		}
		&:focus {
			border-color: var(--krds-input--color-border-active);
		}
	}
	&[disabled] {
		background-color: var(--krds-input--color-surface-disabled);
		border-color: var(--krds-input--color-border-disabled);
		color: var(--krds-input--color-text-disabled);
	}
	&::-webkit-input-placeholder {
		color: var(--krds-input--color-text-placeholder);
	}
	&::-moz-placeholder {
		color: var(--krds-input--color-text-placeholder);
	}
	&:-ms-input-placeholder {
		color: var(--krds-input--color-text-placeholder);
	}
	&::-ms-input-placeholder {
		color: var(--krds-input--color-text-placeholder);
	}
	&:not(textarea):placeholder-shown {
		@include ellipsis(1);
	}
}
textarea {
	&.krds-input {
		--krds-input--textarea-size-height: 14.4rem;
		--krds-input--textarea-padding-x: var(--krds-padding-6);
		--krds-input--textarea-padding-y: var(--krds-padding-3);
		height: var(--krds-input--textarea-size-height);
		padding: var(--krds-input--textarea-padding-y) var(--krds-input--textarea-padding-x);
		line-height: var(--krds-transition-base);
	}
}
.is-error {
	.krds-input {
		background-color: var(--krds-input--color-surface-error);
		border-color: var(--krds-input--color-border-error);
		border-width: 2px;
		color: var(--krds-input--color-text-error);
		&:focus {
			border-color: var(--krds-input--color-border-active);
		}
	}
}

.textarea-wrap {
	@include flex-layout($fd:column, $ai:normal);
	gap: var(--krds-gap-3);
	width: 100%;
}
.textarea-count {
	--krds-input--count-number-pc-font-size: var(--krds-pc-font-size-body-small);
	--krds-input--count-number-mobile-font-size: var(--krds-mobile-font-size-body-small);
	--krds-input--count-number-color-text: var(--krds-#{$mode-setting}-color-text-subtle);
	--krds-input--count-number-color-text-active: var(--krds-#{$mode-setting}-color-text-primary);
	--krds-input--count-number-color-text-error: var(--krds-#{$mode-setting}-color-text-danger);

	@include flex-layout($ai: center, $jc: flex-end);
	gap: var(--krds-gap-1);
	width: 100%;
	font-size: var(--krds-input--count-number-pc-font-size);
	color: var(--krds-input--count-number-color-text);
	@include size-medium {
		font-size: var(--krds-input--count-number-mobile-font-size);
	}
	.count-now {
		color: var(--krds-input--count-number-color-text-active);
	}
}
.is-error {
	.textarea-count {
		.count-now {
			color: var(--krds-input--count-number-color-text-error);
		}
	}
}


.textarea-bottom {
	@include flex-layout();
	gap: var(--krds-gap-5);
	.textarea-count {
		margin-left: auto;
		flex-basis: content;
		order:2;
	}
	.form-hint-invalid {
		align-items: flex-start;
		order:1;
		&::before {
			flex:none;
		}
	}
}

/* 날짜선택 */
.calendar-input {
	--krds-input--color-surface: var(--krds-#{$mode-setting}-color-input-surface);

	position: relative;
	z-index: 1;
	width: 100%;
	.krds-input {
		padding-right: var(--krds-form-group--icon-padding-right);
		background-image: none;
	}
	.krds-btn {
		@include position($t: 50%, $r: var(--krds-padding-7)); //form control large 사이즈에만 버튼 들어감
		transform: translateY(-50%);
	}
    .range {
        &::after {
            display:none;
        }
    }
}

//고대비모드
@include color-mode($mode: high-contrast) {
	//모드 설정
	$mode-setting: high-contrast;

	.krds-input {
		@include input-color-variable($mode: #{$mode-setting});
		@include border-size-mode(#{$mode-setting});
	}
	.textarea-count {
		--krds-input--count-number-color-text: var(--krds-#{$mode-setting}-color-text-subtle);
		--krds-input--count-number-color-text-active: var(--krds-#{$mode-setting}-color-text-primary);
	}

	/* 날짜선택 */
	.calendar-input {
		--krds-input--color-surface: var(--krds-#{$mode-setting}-color-input-surface);
	}
}