label{
	cursor:pointer
}
input{
	outline:none
}
input[type="text"],
input[type="date"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="email"],
textarea{
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	border:2px solid var(--border-light);
	padding:var(--spacing-3) var(--spacing-5);
	max-width:100%;
	font-size:16px;
	min-width:1px;
	width:100%;
	color:var(--text-body-01-inverse)!important;
	background-color:var(--tertiary-default)!important;
	border-radius:var(--radius-md);
	font-family:var(--font-primary);
	transition:border-color .4s, background-color .4s
}
input[type="text"]::-webkit-input-placeholder,
input[type="text"]::-moz-placeholder,
input[type="text"]::-placeholder,
input[type="text"]::-ms-input-placeholder,
input[type="date"]::-webkit-input-placeholder,
input[type="date"]::-moz-placeholder,
input[type="date"]::-placeholder,
input[type="date"]::-ms-input-placeholder,
input[type="password"]::-webkit-input-placeholder,
input[type="password"]::-moz-placeholder,
input[type="password"]::-placeholder,
input[type="password"]::-ms-input-placeholder,
input[type="tel"]::-webkit-input-placeholder,
input[type="tel"]::-moz-placeholder,
input[type="tel"]::-placeholder,
input[type="tel"]::-ms-input-placeholder,
input[type="email"]::-webkit-input-placeholder,
input[type="email"]::-moz-placeholder,
input[type="email"]::-placeholder,
input[type="email"]::-ms-input-placeholder{
	
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
	z-index:1
}

input[type="text"]:disabled,
input[type="date"]:disabled,
input[type="password"]:disabled,
input[type="tel"]:disabled,
input[type="number"]:disabled,
input[type="email"]:disabled,
input[type="text"]:disabled + .after,
input[type="tel"]:disabled + .after,
input[type="number"]:disabled + .after,
input[type="email"]:disabled + .after{
	opacity:.3
}
label.input-field input::placeholder,
label.input-field textarea::placeholder{
	opacity:0
}
label.input-field input:focus-visible{
	border-color:var(--border-dark)
}
label.input-field input:focus-visible::placeholder,
label.input-field textarea:focus-visible::placeholder{
	opacity:1;
	color:var(--text-body-03-inverse)
}
label.input-field .value{
	display:block;
	max-width:100%;
	position:relative
}
label.input-field{
	width:100%;
	position:relative
}
label.input-field:focus-within input{
	background:var(--tertiary-active)!important
}
label.input-field span{
	z-index:1;
	line-height:1;
    position:absolute;
	top:50%;
	transform:translate(0, -50%);
    left:var(--spacing-5);
    display:flex;
	gap:var(--spacing-1);
	color:var(--text-body-03-inverse);
	user-select:none;
	pointer-events:none;
    transition:top .4s, font-size .4s, background-color .4s, padding .4s, color .4s
}
label.input-field:focus-within span,
label.input-field.focused span{
	top:1px;
	font:var(--body-s-regular);
	letter-spacing:var(--letter-spacing-s);
	background-color:var(--tertiary-active);
	border-radius:4px;
	padding:2px
}
label.input-field span:after{
	display:block;
	font-size:14px;
	opacity:.75
}
label.input-field:has(input:required, textarea:required) span:after{
	content:"*";
	color:var(--text-light-error)
}
label.input-field:not(:has(input:required, textarea:required)) span:after{
	content: "(по желанию)"
}
label.input-field:has(textarea) span{
	top:20%
}

label.input-field .clear{
	position:absolute;
	top:50%;
	right:var(--spacing-3);
    display:flex;
    opacity:0;
    visibility:hidden;
    transform:scale(0.7) translate(0, -50%);
    transition:all .4s ease-out;
    fill:var(--text-body-01-inverse);
    flex-shrink:0
}

label.input-field .clear.is-visible{
    opacity:1;
    visibility:visible;
    transform:scale(1) translate(0, -50%)
}

label.input-field .clear:hover{
    fill:var(--text-body-03-inverse)
}

input[type=checkbox]{
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	cursor:pointer;
	width:24px;
	min-width:24px;
	height:24px;
	display:flex;
	align-items:center;
	justify-content:center;
	background-color:var(--tertiary-default);
	border:2px solid var(--border-light);
	border-radius:2px;
	margin:0;
	transition:background-color .4s
}
input[type=checkbox]:checked:after{
	content:"";
	display:block;
	width:10px;
	height:6px;
	border:3px solid var(--text-body-01-inverse);
	border-width:3px 3px 0 0;
	transform:rotate(135deg)
}
input[type=checkbox]:hover,
label:hover input[type=checkbox]{
	background-color:var(--tertiary-hover)
}
input[type=checkbox]:active,
label:active input[type=checkbox]{
	background-color:var(--tertiary-active)
}

label.checkbox-field{
	display:flex;
	align-items:center;
	gap:var(--spacing-2);
	user-select:none
}


label.input-field.light input[type="text"],
label.input-field.light input[type="date"],
label.input-field.light input[type="password"],
label.input-field.light input[type="tel"],
label.input-field.light input[type="number"],
label.input-field.light input[type="email"],
label.light input[type=checkbox],
label.input-field.light textarea{
	background-color:var(--surface-white)!important;
	color:var(--text-body-01)!important;
	border-color:#8f8f8f
}

label.input-field.light span{
	color:var(--text-body-02)
}
label.input-field.light:focus-within span,
label.input-field.light.focused span{
	background-color:var(--surface-white)
}
label.light input[type=checkbox]:checked:after{
	border-color:var(--text-body-01)
}