input()
	.bunt-input
		display flex
		flex-direction column
		height 56px
		padding-top 16px
		flex-shrink 0
		.label-input-container
			position: relative
			display: flex
			align-items: center
		.icon
			font-size: 22px
			color: $clr-secondary-text-light
			padding: 0 0 0 8px
		input
			box-sizing: border-box
			height: 37px
			width: 100%
			border none
			outline none
			font-family $font-stack
			font-size 16px
			font-weight 400
			flex: auto
			padding: 8px 8px 8px 12px
			background-color: transparent
			border-radius: 4px
		label
			position absolute
			top 8px
			left 12px
			font-size 16px
			font-weight 400
			line-height 21px
			pointer-events none
			color $clr-secondary-text-light
			transition transform 0.25s, width 0.25s
			transform-origin left top
		::placeholder
			color $clr-secondary-text-light
		.error-icon
			font-size: 22px
			color: $clr-danger
			padding-right: 8px
		.outline
			position: absolute
			top: 0
			left: 0
			height: 100%
			width: 100%
			stroke: $clr-disabled-text-light
			stroke-width: 1px
			fill: none
			pointer-events: none
			stroke-dasharray: calc(var(--label-gap)/2 + 4) 0 100000
			transition: stroke .15s $material-easing, stroke-width .15s $material-easing, stroke-dasharray .15s $material-easing
		.hint
			font-size 13px
			padding-top 0
			padding-left 16px
			color $clr-secondary-text-light
			line-height 18px
			p // nuke margins for raw html includes
				margin 0

		&.with-icon
			input
				padding-left: 4px

		&.focused
			.outline
				stroke: $clr-primary
				stroke-width: 2px
			label
				color $clr-primary

		&.floating-label, &.focused
			.outline
				stroke-dasharray: 3 var(--label-gap) 10000
			label
				transform: translateY(-15px) scale(0.75)

		&.disabled
			cursor: not-allowed
			input
				cursor: not-allowed
				background-color: alpha($clr-black, 0.08)
				color: $clr-disabled-text-light

			.outline
				stroke-dasharray: 10
			&.floating-label, &.focused
				.outline
					$dash = ''
					for num in (1..135)
						$dash += ' 10'
					stroke-dasharray: 3 var(--label-gap) unquote($dash)

		&.invalid
			.hint , label
				color $clr-danger

			.outline
				stroke: $clr-danger
				stroke-width: 2px

input-style(style = 'light', size = 'dense')
	input-size(size)
	if style is 'dark'
		input
			color: $clr-primary-text-dark
		label, .hint, .icon, ::placeholder
			color: $clr-secondary-text-dark

		.bunt-input.disabled
			input
				color: $clr-disabled-text-dark
				background-color: alpha($clr-white, 0.08)
		.outline
			stroke: $clr-dividers-dark

input-size(size)
	if size is 'large'
		height: 76px
		input
			height: 55px
			padding 16px 8px 16px 11px
		label
			top: 16px
		.hint
			padding-top: 4px
		&.floating-label, &.focused
			label
				transform: translateY(-23px) scale(0.75)

	if size is 'compact'
		height: 37px  // dont reserve space for hint