/* 
 * name : Input Css
 * date : 2024-01-03
 */

/* input style */
.form-control {
	//default : primary color height lg
	$size: lg;
	position: relative;
	width: 100%;
	height:var(--#{$prefix}input-h-#{$size});
	padding: 0 var(--#{$prefix}input-px-#{$size});
	background-color: var(--#{$prefix}white);
	border: 1px solid var(--#{$prefix}gray-30);
	border-radius: var(--#{$prefix}input-rd-#{$size});
	font-family: inherit;
	font-size: var(--#{$prefix}input-fz-#{$size});;
	color: var(--#{$prefix}gray-90);
	transition: $transition-base;
	&.cal {
		background: url(#{$url}/component/common/ico_calendar.svg) no-repeat right 1.6rem top 50%;
		background-size: 2.4rem;
	}
}
.form-control:focus {
	border-color: var(--#{$prefix}primary);
	border-width: 2px;
	outline: none;
}
.form-control[readonly] {
	background-color: var(--#{$prefix}gray-30);
	border-color: var(--#{$prefix}gray-40);
	color: var(--#{$prefix}gray-70);
	&.datepicker {
		background-color: var(--#{$prefix}white);
		border-color: var(--#{$prefix}gray-60);
		color: var(--#{$prefix}gray-90);
	}
	&::-webkit-input-placeholder {
		color: var(--#{$prefix}gray-60);
	}
	&::-moz-placeholder {
		color: var(--#{$prefix}gray-60);
	}
	&:-ms-input-placeholder {
		color: var(--#{$prefix}gray-60);
	}
	&::-ms-input-placeholder {
		color: var(--#{$prefix}gray-60);
	}
}
.form-control[disabled] {
	background-color: var(--#{$prefix}gray-30);
	border-color: var(--#{$prefix}gray-40);
	color: var(--#{$prefix}gray-60);
	&::-webkit-input-placeholder {
		color: var(--#{$prefix}gray-60);
	}
	&::-moz-placeholder {
		color: var(--#{$prefix}gray-60);
	}
	&:-ms-input-placeholder {
		color: var(--#{$prefix}gray-60);
	}
	&::-ms-input-placeholder {
		color: var(--#{$prefix}gray-60);
	}
}
.error .form-control,
.error.form-control,
.error .form-control:focus,
.error.form-control:focus {
	border-color: var(--#{$prefix}point);
	border-width: 2px;
}
.validation-chk,
.form-info {
	display: flex;
	position: relative;
	min-height: var(--#{$prefix}spacer-6);
	margin-top: var(--#{$prefix}spacer-3);
	font-size: var(--#{$prefix}--krds-fz-body-sm);
	color: var(--#{$prefix}gray-70);
	line-height: var(--#{$prefix}spacer-6);
}
.validation-chk:empty {
	display: none;
}
.validation-chk:before,
.form-info:before {
	@include foursquare(2rem);
	@include flex-size(0, 0);
	@include pseudo();
	margin-right: var(--#{$prefix}spacer-1);
	background-color: var(--#{$prefix}gray-30);
}
.error .validation-chk,
.error .form-info {
	color: var(--#{$prefix}danger);
}
textarea.form-control {
	height: var(--#{$prefix}spacer-50);
	padding: var(--#{$prefix}spacer-4);
	line-height: $line-height-base;
}
.textarea-wrap {
	@include flex-layout($fd:column, $ai:normal);
    .form-control {
        &:placeholder-shown {
            -webkit-box-orient: inherit;
        }

    }
}
.textarea-count {
	font-size: var(--#{$prefix}fz-label-sm);
	width: 100%;
	margin-top: var(--krds-spacer-3);
	text-align: right;
	.text-num {
		margin-left: var(--krds-spacer-default2);
	}
}
input[type=number] {
	-moz-appearance: textfield;
	margin: 0;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input[type='text']::-ms-clear {
	display: none;
}

/* placeholder style */
.form-control::-webkit-input-placeholder {
	color: var(--#{$prefix}gray-50);
	
}
.form-control::-moz-placeholder {
	color: var(--#{$prefix}gray-50);
}
.form-control:-ms-input-placeholder {
	color: var(--#{$prefix}gray-50);
}
.form-control::-ms-input-placeholder {
	color: var(--#{$prefix}gray-50);
}
.form-control:placeholder-shown {
	@include ellipsis(1);
}

/* 날짜선택 */
.datepicker-input {
	position: relative;
	z-index: 1;
	.form-control {
		padding-right: (var(--#{$prefix}spacer-14));
		background-image: none;
	}
	.form-btn-datepicker {
		position: absolute;
		top: 50%;
		right: .8rem;
		width: 4rem;
		height: 4rem;
		padding: var(--#{$prefix}spacer-4);
		transform: translateY(-50%);
		background: url(#{$url}/component/common/ico_calendar.svg) no-repeat center;
    	background-size: 2.4rem;
	}
    .range {
        &::after {
            display:none;
        }
    }
}

/* form layouts */
.form-wrap {
	display: grid;
	gap: var(--#{$prefix}spacer-6);

	> li,
	&.standalone,
	> .row {
		line-height: $line-height-none;
		@at-root .form-tit {
			display: flex;
			position: relative;
			font-size: var(--#{$prefix}fz-body-sm);
			color: var(--#{$prefix}black);
			/*line-height: $line-height-none;*/
		}
	}
	.form-conts {
		&.group {
			@include group-wrap;
			> .form-control {
				@include group;
				margin-right: var(--#{$prefix}spacer-2);
			}
		}
	}
}

/* radio checkbox */
input[type=radio],
input[type=checkbox] {
	@include sr-only;
}
.chk-area {
	display: flex;
	gap: var(--#{$prefix}spacer-6);
	&.chk-column {
		flex-direction: column;
	}
}

.chip-wrap {
	@include flex-layout($jc: space-between,);
	gap: var(--krds-spacer-2);
	.form-chip {
		flex: 1;
		.radio {
			&:not(:checked) {
				~ .form-chip-outline {
					&::before {
						display: none;
					}
				}
			}
			~ .form-chip-outline {
				justify-content: center;
				width: 100%;
				padding: 0;
			}
		}
	}
}

.form-check {
	$size: md;
	input[type=radio],
	input[type=checkbox] {
		~ label {
			position: relative;
			display: inline-flex;
			min-height: var(--#{$prefix}rdo-size-#{$size});
			padding-left: calc(var(--#{$prefix}rdo-size-#{$size}) + var(--#{$prefix}spacer-2));
			font-size: var(--#{$prefix}rdo-fz-#{$size});
			line-height: var(--#{$prefix}rdo-size-#{$size});

			&:before,
			&:after {
				display: block;
				@include pseudo();
				transition: .4s cubic-bezier(.4, .0, .23, 1);
			}
			&:before {
				z-index: 3;
			}
			&:after {
				z-index: 4;
			}
		}
		&:focus {
			~ label {
				@include focus($offset: .4rem, $color: $primary);
			}
		}
		&:disabled {
			+ label {
				color: var(--#{$prefix}gray-50);
				cursor: default;
			}
		}
	}

	input[type=radio] {
		~ label {
			&:before {
				@include position($t: 0, $l: 0,);
				width: var(--#{$prefix}rdo-size-#{$size});
				height: var(--#{$prefix}rdo-size-#{$size});
				background-color: var(--#{$prefix}white);
				border: 1px solid var(--#{$prefix}gray-60);
				border-radius: var(--#{$prefix}rd-full);
			}
			&:after {
				//포지션: (전체사이즈 - 체크박스 사이즈) / 2
				$pos: calc((var(--#{$prefix}rdo-size-#{$size}) - var(--#{$prefix}rdo-chk-#{$size})) / 2);
				@include position($t: $pos, $l: $pos);
				width: var(--#{$prefix}rdo-chk-#{$size});
				height: var(--#{$prefix}rdo-chk-#{$size});
				background-color: var(--#{$prefix}white);
				border-radius: var(--#{$prefix}rd-full);
			}
		}
		&:checked {
			~ label {
				&:before {
					border-color: var(--#{$prefix}primary);
				}
				&:after {
					background-color: var(--#{$prefix}primary);
				}
			}
			&:disabled {
				~ label {
					&:before {
						border-color: var(--#{$prefix}gray-40);
						background-color: var(--#{$prefix}gray-20);
					}
					&:after {
						display: block;
						background-color: var(--#{$prefix}gray-40);
					}
				}
			}
		}
		&:disabled {
			~ label {
				&:before {
					border-color: var(--#{$prefix}gray-40);
					background-color: var(--#{$prefix}gray-20);
				}
				&:after {
					display: none;
					background-color: var(--#{$prefix}gray-40);
				}
			}
		}
	}
	input[type=checkbox] {
		~ label {
			&:before {
				@include position($t: 0, $l: 0,);
				width: var(--#{$prefix}chk-size-#{$size});
				height: var(--#{$prefix}chk-size-#{$size});
				background-color: var(--#{$prefix}white);
				border: 1px solid var(--#{$prefix}gray-60);
				border-radius: var(--#{$prefix}rd-4);
			}
			&:after {
				//포지션: (전체사이즈 - 체크박스 사이즈) / 2
				$pos: calc((var(--#{$prefix}chk-size-#{$size}) - var(--#{$prefix}chk-primary-chk-#{$size})) / 2);
				@include position($t: $pos, $l: $pos);
				width: var(--#{$prefix}chk-primary-chk-#{$size});
				height: var(--#{$prefix}chk-primary-chk-#{$size});
				background: url(#{$url}/component/common/ico_check_primary_checked.svg) no-repeat 0 0;
				background-size: contain;
				opacity: 0;
			}
		}
		&:checked {
			~ label {
				&:before {
					background-color: var(--#{$prefix}primary);
					border-color: var(--#{$prefix}primary);
				}
				&:after {
					opacity: 1;
					transition-delay: .2s;
				}
			}
		}
		&:disabled {
			~ label {
				&:before {
					border-color: var(--#{$prefix}gray-40);
					background-color: var(--#{$prefix}gray-20);
				}
				&:after {
					background-image: url(#{$url}/component/common/ico_check_primary_disabled.svg);
				}
			}
		}
	}
	&.ico-only {
		display: inline-flex;
        vertical-align: middle;
		> [type=checkbox] {
			~ label {
				padding-left: var(--#{$prefix}chk-size-#{$size}) !important;
			}
		}
		> [type=radio] {
			~ label {
				padding-left: var(--#{$prefix}rdo-size-#{$size}) !important;
			}
		}
	}
}

.chk-secondary {
	$size: md;
	.form-check {
		input[type=checkbox] {
			~ label {
				&:before {
					background-color: transparent;
					border-color: transparent;
				}
				&:after {
					$pos: calc((var(--#{$prefix}chk-size-#{$size}) - var(--#{$prefix}chk-secondary-chk-#{$size})) / 2);
					@include position($t: $pos, $l: $pos);
					width: var(--#{$prefix}chk-secondary-chk-#{$size});
					height: var(--#{$prefix}chk-secondary-chk-#{$size});
					background: url(#{$url}/component/common/ico_check_secondary.svg) no-repeat 0 0;
					opacity: 1;
				}
			}
			&:checked {
				~ label {
					&:before {
						background-color: transparent;
						border-color: transparent;
					}
					&:after {
						background-image: url(#{$url}/component/common/ico_check_secondary_checked.svg);
					}
				}
			}
			&:disabled {
				~ label {
					&:before {
						background-color: transparent;
						border-color: transparent;
					}
					&:after {
						background-image: url(#{$url}/component/common/ico_check_secondary_disabled.svg);
					}
				}
			}
		}
	}
}

//list형 checkbox
.chk-group-area {
	> * {
		width: 100%;
	}
	.chk-all-wrap {
		@include flex-layout($ai: center, $jc: space-between);
		color: var(--#{$prefix}gray-90);
		.form-group {
			width: auto;
		}
	}
	.chk-group-wrap {
		@include flex-layout($fd: column);
		gap: var(--#{$prefix}spacer-6);
		> li {
			@include flex-layout($fd: column);
			gap: var(--#{$prefix}spacer-6);
			width: 100%;
			padding: var(--#{$prefix}spacer-6);
			border: 1px solid var(--#{$prefix}gray-40);
			border-radius: var(--#{$prefix}rd-12);
			transition: $transition-base;
			.btn {
				color: var(--#{$prefix}gray-90);
			}
			&.checked {
				border-color: var(--#{$prefix}primary);
			}
			&.disabled {
				background-color: var(--#{$prefix}gray-5);
				border-color: var(--#{$prefix}gray-30);
				.btn {
					color: var(--#{$prefix}gray-50);
					&.btn-txt {
						&.ico-arr {
							&::after {
								background-image: url(#{$url}/component/common/ico_arr_20_right_disabled.svg);
								background-position: center;
								background-size: 1.6rem;
							}
						}
					}

				}
			}
		}
		$box-pl: 4.4rem;
		input[type=radio],
		input[type=checkbox] {
			+ label {
				flex-direction: column;
				width: 100%;
				padding-left: $box-pl;
				.tit {
					font-weight: map-get($fws, bold);
					color: var(--#{$prefix}gray-90);
					+ .conts-desc {
						margin-top: var(--#{$prefix}spacer-4);
					}
				}
			}
			&:disabled {
				+ label {
					color: var(--#{$prefix}gray-50);
					.tit {
						color: inherit;
					}
				}
			}
		}
		.btn-wrap {
			width: initial;
			margin-left: $box-pl;
		}
	}
}

//error
.is-error {
	.form-control {
		border-color: var(--#{$prefix}point);
		border-width: 2px;
	}
}