label{
	cursor:pointer
}

input[type=text],
input[type=tel],
input[type=email],
input[type=number]{
	appearance:none;
	background:var(--surface-02);
	border-radius:var(--radius-m);
	border:1px solid transparent;
	padding:var(--spacing-4) var(--spacing-1) var(--spacing-2) var(--spacing-4);
	font-size:16px
}
input.expand{
	width:100%
}
input.surface-white{
	background:var(--surface-white)
}

label.field .value{
	position:relative
}
label.field .value input::placeholder{
	opacity:0
}
label.field .value p{
	position:absolute;
	top:50%;
	left:var(--spacing-4);
	transform:translate(0, -50%);
	padding:0;
	margin:0;
	font-size:16px;
	color:var(--text-body-03);
	user-select:none;
	transition:top .4s, font-size .4s
}
label.field:focus-within .value p,
label.field.focused .value p{
	top:25%;
	font-size:12px
}
label.field:focus-within .value input::placeholder{
	opacity:1
}


input[type=checkbox],
input[type=radio]{
	-webkit-appearance:none;
	appearance:none;
	border-radius:var(--radius-xs);
	width:var(--spacing-5);
	height:var(--spacing-5);
	cursor:pointer;
	vertical-align:middle;
	background:var(--surface-02);
	float:left;
	margin:0 var(--spacing-2) 0 0
}

input[type=checkbox]:checked,
input[type=radio]:checked{
	background:var(--primary-default);
    color:var(--text-body-01-inverse);
    position:relative
}
input[type=checkbox]:checked:after,
input[type=radio]:checked:after{
	content:"";
    position:absolute;
    width:var(--spacing-4);
    height:var(--spacing-2);
    border:2px solid var(--text-body-01-inverse);
    border-width:2px 2px 0 0;
    border-radius:2px;
    left:var(--spacing-1);
    top:var(--spacing-1);
    transform:rotate(135deg)
}