%fieldset
	%input#example{:type => "text"}
	%label{:for => "example"} Label
	%div

fieldset {
	position: relative;
	width: 100%;
	max-width: 200px;
	input, label {
		display: block;
		font-family: $f;
		font-size: 16px;
		line-height: 1.2;
	}
	label {
		transition: all 150ms ease-out;
		will-change: transform;
		transform: none;
		transform-origin: center left;
		display: block;
		position: absolute;
		z-index: 0;
		left: 0;
		top: 0;
		width: 100%;
	}
	div {
		position: relative;
		border: 0;
		margin-top: $p/3;
		background-color: rgba($slate, .2);
		&, &:after {
			transition: all 150ms ease-out;
			width: 100%;
			height: 2px;
			border-radius: 2px;
		}
		&:after {
			will-change: transform;
			transform-origin: left center;
			transform: scaleX(0);
			content: "";
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			background: $slate;
		}
	}
	input {
		appearance: none;
		position: relative;
		z-index: 1;
		width: 100%;
		border: 0;
		margin: 0;
		padding: 0;
		background: none;
		&:hover {
			~ div {
				background-color: rgba($slate, .3);
			}
		}
		&:focus {
			~ label {
				transform: translateY(-100%) translateY(-2px);
				font-size: 12px;
			}
			~ div {
				&:after {
					transform: none;
				}
			}
		}
	}
}