<commit_before>@import "nib"
@import "rupture"
@import "../cf-variables"

cf-input
	display block
	position absolute
	width calc(100% - 40px)
	height auto
	bottom 20px

	input
		// resets..
		&:-webkit-autofill
			// -webkit-box-shadow 0 0 0px 1000px white inset
			background-color white

		&:focus, &:focus, &:focus
			outline none
			-webkit-appearance none
			box-shadow 0px 0px 30px rgba(0,0,0,0.2)
		
		border-radius 0
		border none
		-webkit-appearance none
		position relative
		z-index 2

		// styling
		font-family 'Roboto', sans-serif
		font-size 12px

		width 100%
		height $input-field-height
		color $color-input-text
		will-change box-shadow, background, color
		transition box-shadow $anim-time $anim-easeOut, background $anim-time $anim-easeOut, color $anim-time $anim-easeOut
		background white
		box-shadow 0px 0px 1px rgba(0,0,0,0.15)
		padding 5px 5px 5px 15px

		&::-webkit-input-placeholder
			color currentColor
		&::-moz-input-placeholder
			color currentColor
		&:-moz-input-placeholder
			color currentColor
		&:-ms-input-placeholder
			color currentColor

	&[disabled="disabled"]
		pointer-events none

		input
			background $color-chat-reponse-user-bg

		.cf-input-button
			background $color-chat-reponse-user-bg

	&[error]
		input
			background $color-input-error-bg
			color $color-input-error-text

		.cf-input-button
			background $color-input-error-bg

			svg polygon
				fill $color-input-error-text
	
	&[tag-type="file"]
		.cf-input-button
			background white !important

			svg.cf-icon-attachment
				opacity 1
			svg.cf-icon-progress
				opacity 0

cf-input-button.cf-input-button
	width 29px
	height 29px
	background: white
	border: 1px solid white
	position: absolute
	overflow hidden
	right 5px
	bottom 8px
	z-index 3
	cursor pointer
	border-radius 50%
	will-change background, border
	transition background $anim-time * 0.5 $anim-easeOut, border $anim-time * 0.5 $anim-easeOut

	svg
		position absolute
		width 100%
		height auto
		transform-origin 50% 50%

	svg.cf-icon-attachment
		opacity 0
		path
			stroke #b9bcbe
			will-change stroke
			transition stroke $anim-time * 0.5 $anim-easeOut

	svg.cf-icon-progress
		polygon
			fill #b9bcbe
			will-change fill
			transition fill $anim-time * 0.5 $anim-easeOut
	
	&:active
		svg
			transform scale(0.75, 0.75)

	+above($breakpoint-1)
		&:hover
			background: $color-chat-reponse-user-bg
			border: 1px solid lighten($color-chat-reponse-user-text, 75%)

			svg.cf-icon-progress
				animation cf-arrow-up $anim-time $anim-easeInOut
				polygon
					fill $color-dark-blue
			<commit_msg>flip icon when input state change<commit_after>@import "nib"
@import "rupture"
@import "../cf-variables"

cf-input
	display block
	position absolute
	width calc(100% - 40px)
	height auto
	bottom 20px

	input
		// resets..
		&:-webkit-autofill
			// -webkit-box-shadow 0 0 0px 1000px white inset
			background-color white

		&:focus, &:focus, &:focus
			outline none
			-webkit-appearance none
			box-shadow 0px 0px 30px rgba(0,0,0,0.2)
		
		border-radius 0
		border none
		-webkit-appearance none
		position relative
		z-index 2

		// styling
		font-family 'Roboto', sans-serif
		font-size 12px

		width 100%
		height $input-field-height
		color $color-input-text
		will-change box-shadow, background, color
		transition box-shadow $anim-time $anim-easeOut, background $anim-time $anim-easeOut, color $anim-time $anim-easeOut
		background white
		box-shadow 0px 0px 1px rgba(0,0,0,0.15)
		padding 5px 5px 5px 15px

		&::-webkit-input-placeholder
			color currentColor
		&::-moz-input-placeholder
			color currentColor
		&:-moz-input-placeholder
			color currentColor
		&:-ms-input-placeholder
			color currentColor

	&[disabled="disabled"]
		pointer-events none

		input
			background $color-chat-reponse-user-bg

		.cf-input-button
			background $color-chat-reponse-user-bg

	&[error]
		input
			background $color-input-error-bg
			color $color-input-error-text

		.cf-input-button
			background $color-input-error-bg

			svg polygon
				fill $color-input-error-text
	
	&[tag-type="file"]
		cf-input-button.cf-input-button
			svg.cf-icon-attachment
				transform rotateX(0deg)
				opacity 1
			svg.cf-icon-progress
				transform rotateX(-90deg)
				opacity 0

cf-input-button.cf-input-button
	width 29px
	height 29px
	background: white
	border: 1px solid white
	position: absolute
	overflow hidden
	right 5px
	bottom 8px
	z-index 3
	cursor pointer
	border-radius 50%
	will-change background, border
	transition background $anim-time * 0.5 $anim-easeOut, border $anim-time * 0.5 $anim-easeOut
	perspective 2000px

	svg
		position absolute
		width 100%
		height auto
		transform-origin 50% 50%
		will-change transform, opacity
		transition transform $anim-time * 0.5 $anim-easeOut, opacity $anim-time * 0.5 $anim-easeOut


	svg.cf-icon-attachment
		transform rotateX(90deg)
		opacity 0

		path
			stroke #b9bcbe
			will-change stroke
			transition stroke $anim-time * 0.5 $anim-easeOut

	svg.cf-icon-progress
		transform rotateX(0deg)
		opacity 1

		polygon
			fill #b9bcbe
			will-change fill
			transition fill $anim-time * 0.5 $anim-easeOut
	
	&:active
		svg
			transform scale(0.75, 0.75)

	+above($breakpoint-1)
		&:hover
			background: $color-chat-reponse-user-bg
			border: 1px solid lighten($color-chat-reponse-user-text, 75%)

			svg.cf-icon-progress
				animation cf-arrow-up $anim-time $anim-easeInOut
				polygon
					fill $color-dark-blue
			
{'fraction_non_alphanumeric': 0.10474963181148748, 'fraction_numerical': 0.03368924889543446, 'mean_word_length': 3.1824480369515014, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2622314', 'n_tokens_mistral': 2330, 'n_tokens_neox': 1873, 'n_words': 482}