components/src/dzeio/Input/Input.module.styl

@import '../config'

.parent
	position relative
	margin 16px 0
	max-width 100%
	display inline-block

	&:not(.block) + .parent:not(.block)
		margin-left 16px

	label
		font-size 1rem
		font-weight 600
		color black
		display inline-block
		margin-bottom .5rem
		transition all $transition
		position absolute
		top 16px
		pointer-events none
		left 16px

		@media (prefers-color-scheme dark)
			color white

	svg
		position absolute
		color #AAA
		transition color $transition
		pointer-events none
		top 14px
		&.left
			left 16px // input padding-left

			~ label
				left 16px + 24px + 10px

		&.right
			right 16px

	select
		appearance none

		option
			background $foregroundLight
			color black
			@media (prefers-color-scheme dark)
				background lighten($foregroundDark, 5%)
				color white

	textarea
		resize none
		overflow-y hidden


	/* Remove the arrows from the Number Input */
	input[type="number"]
		-moz-appearance textfield

	input::-webkit-outer-spin-button
	input::-webkit-inner-spin-button
		-webkit-appearance none
		margin 0
	/* End */

	.autocomplete
		display flex
		opacity 0
		transition all $transition
		overflow-x hidden
		pointer-events none
		// display flex
		flex-direction column
		list-style none
		position absolute
		top calc(100% - 4px)
		left 0
		width 100%
		z-index 100
		box-shadow 0 4px 8px rgba(black, .3)
		margin 0
		padding 0
		background darken($foregroundLight, 5%)
		@media (prefers-color-scheme dark)
			background lighten($foregroundDark, 5%)

		border-bottom-left-radius 4px
		border-bottom-right-radius 4px
		max-height 25vh
		overflow-y auto
		@media (max-width $mobile)
			max-height 50vh
		&.reverse
			flex-direction column-reverse
			top initial
			bottom 100%
			box-shadow 0 -4px 8px rgba(black, .3)
			border-radius 0
			border-top-left-radius 4px
			border-top-right-radius 4px
		li
			transition all $transition
			padding 8px
			@media (max-width $mobile)
				padding 24px
			cursor pointer
			&:hover
				background darken(@background, 20%)
				@media (prefers-color-scheme dark)
					background lighten(lighten($foregroundDark, 5%), 20%)

	div + .autocomplete
		top calc(100% - 4px - .9em)

	input:focus ~ .autocomplete
	select:focus ~ .autocomplete
	textarea:focus ~ .autocomplete
	.autocomplete:hover
		opacity 1
		pointer-events inherit

	input
	select
	textarea
		padding 14px 16px
		height 56px
		border 2px solid $grayDark
		border-radius 4px
		max-width 100%
		box-sizing border-box
		font-size .875rem
		outline none
		background transparent
		transition all $transition
		color black
		@media (prefers-color-scheme dark)
			border-color $grayLight
			color white

		&:not(:placeholder-shown)
		&:focus
		&:not([placeholder=" "])
			~ label
				top -8px
				left 16px - 4px // .input/padding-left label/padding-left
				background white
				padding 0 4px

				@media (prefers-color-scheme dark)
					background #202020

		&:disabled
			border-color #999

			@media (prefers-color-scheme dark)
				border-color #444
				~label
					color #444
			~ label
				color #999

		&:not(:disabled)
			&:hover
				border-color black
				@media (prefers-color-scheme dark)
					border-color white

				+ svg
					color black

					@media (prefers-color-scheme dark)
						color white
			&:focus
				border-color $main

				~ label
					color @border-color

				~ svg
					color @border-color
			&:invalid
				border-color $errorDark

				~ label
					color @border-color

				~ svg
					color @border-color
				@media (prefers-color-scheme dark)
					border-color $errorLight

					~ label
						color @border-color

					~ svg
						color @border-color


		&.iconLeft
			padding-left 16px + 24px + 10px
		&.iconRight
			padding-right 16 + 24 + 10px
		&.filled
			border none
			background rgba(gray, .1)
			border-radius @border-radius @border-radius 0 0
			border-bottom 2px solid rgba(black,.4)

			@media (prefers-color-scheme dark)
				background rgba(white, .1)
				border-bottom 2px solid rgba(white,.4)

			&.opaque
				background white

				@media (prefers-color-scheme dark)
					background #202020

			&:hover:not(:disabled)
				background rgba(gray, .2)

				@media (prefers-color-scheme dark)
					background rgba(white, .2)

				&.opaque
					background darken(white, 5%)
					@media (prefers-color-scheme dark)
						background #1c1c1c
			&:focus
				background rgba(gray, .3)
				border-bottom 2px solid $main

				&.opaque
					background white

					@media (prefers-color-scheme dark)
						background #202020

			&:not(:placeholder-shown)
			&:focus
			&:not([placeholder=" "])
				~ label
					top 3px
					left 16px - 4px // .input/padding-left label/padding-left
					background transparent
					padding 0
					font-size .75rem
				~ svg.left ~ label
					left 16px + 24px + 10px // .input/padding-left label/padding-left
		~ svg.rotate
			transform rotateX(0)
			transition $transition

		&:focus ~ svg.rotate, ~.autocomplete:hover ~ svg.rotate
			transform rotateX(180deg)
	div
		display flex
		justify-content space-between
		padding 0 16px
		font-size .9em

	&.block, &.block input, &.block select, &.block textarea
		width 100%
		display block