components/src/Input/Input.module.styl

@import '../config'

.label
	font-size rem(16)
	display block
	font-weight bold
	color black
	padding-left 8px
	padding-bottom 4px
	cursor pointer
	@media (prefers-color-scheme dark)
		color white

.parent
	position relative
	max-width 100%
	display inline-block

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

	svg
		position absolute
		user-select none
		padding 8px
		color black
		@media (prefers-color-scheme dark)
			color white
		transition color $transition
		pointer-events none
		&.iconClickable
			pointer-events all
			cursor pointer
		top 14px
		&.left
			left 16px // input padding-left

			~ label
				left 16px + 24px + 10px

		&.right
			right 16px

	select
		appearance none

		option
			background var(--theme-50)
			color black
			@media (prefers-color-scheme dark)
				background var(--gray-800)
				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
		opacity 0
		transition all $transition
		overflow-x hidden
		pointer-events none
		position absolute
		top calc(100% + 16px)
		left 0
		width 100%
		z-index 100
		max-height 25vh
		overflow-y auto
		@media (max-width $mobile)
			max-height 50vh
		&.reverse
			top initial
			bottom calc(100% + 16px)

	div + .autocomplete
		top 100%

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

	input
	select
	textarea
		padding 12px
		border-radius 8px
		max-width 100%
		font-size .875rem
		outline none
		background var(--theme-50)
		transition all $transition
		border 2px solid black
		color black
		@media (prefers-color-scheme dark)
			background var(--gray-800)
			border-color transparent
			border 2px solid var(--gray-500)
			color white

		&::placeholder
			font-size rem(16)
			transition color $transition
			opacity 1

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


		&:disabled
			border-color var(--gray-500)

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

				~ svg
				&::placeholder
					color black

					@media (prefers-color-scheme dark)
						color white
			&:focus
				border-color var(--theme-500)

				~ svg
					color @border-color
				// &::placeholder
				// 	color black

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

		&.iconLeft
			padding-left 16px + 24px + 10px
		&.iconRight
			padding-right 16 + 24 + 10px

		~ svg.rotate
			transform rotateX(0)
			transition $transition

		&:focus ~ svg.rotate
		~ .autocomplete:hover ~ svg.rotate
			transform rotateX(180deg)

	input[type="range"]
		appearance none
		background transparent
		cursor pointer
		width 100%
		border none

		$height = 4px
		&::-webkit-slider-runnable-track
			appearance none
			background-color var(--theme-100)
			height $height
			width 100%
			border-radius $height
			transition $transition
			@media (prefers-color-scheme dark)
				background-color var(--gray-800)
		&:active::-webkit-slider-runnable-track
			background var(--theme-200)
			@media (prefers-color-scheme dark)
				background-color var(--gray-700)
		&::-moz-range-track
			appearance none
			background-color var(--theme-100)
			height $height
			width 100%
			border-radius $height
			transition $transition
			@media (prefers-color-scheme dark)
				background-color var(--gray-800)
		&::-webkit-slider-thumb
			appearance none
			$size = 16px
			margin-top ($height / 2) - ($size / 2)
			height $size
			width $size
			border none
			background-color var(--theme-500)
			border-radius $size
		&::-moz-range-thumb
			appearance none
			$size = 16px
			margin-top ($height / 2) - ($size / 2)
			height $size
			width $size
			border none
			background-color var(--theme-500)
			border-radius $size

	p
		padding 0 8px
		font-size rem(14)

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