@use 'sass:map';
@use '../../../variables' as *;

$_sizes: (
	xs:  (height: 16px, py: 0, px: 8px,  fs: 10px, radius: 0px, icon: 10px),
	sm:  (height: 20px, py: 0, px: 10px, fs: 11px, radius: 0px, icon: 12px),
	md:  (height: 24px, py: 0, px: 12px, fs: 12px, radius: 0px, icon: 16px),
	lg:  (height: 28px, py: 0, px: 14px, fs: 14px, radius: 0px, icon: 18px),
	xl:  (height: 32px, py: 0, px: 16px, fs: 16px, radius: 0px, icon: 20px),
	2xl: (height: 36px, py: 0, px: 18px, fs: 18px, radius: 0px, icon: 24px),
);

$_colors: (primary, secondary, success, info, warning, danger);

.#{$prefix}theme-centurion {
	.#{$prefix}input {
		--#{$prefix}input-height: 24px;
		--#{$prefix}input-padding-y: 0;
		--#{$prefix}input-padding-x: 12px;
		--#{$prefix}input-font-size: 12px;
		--#{$prefix}input-border-radius: 0px;
		--#{$prefix}input-font-family: var(--#{$prefix}font-sans);

		&--filled {
			& > .#{$prefix}outline {
				--#{$prefix}outline-border-width: 1px;
			}

			& > .#{$prefix}glow {
				--#{$prefix}glow-opacity: 0;
			}
		}

		&--outlined {
			& > .#{$prefix}overlay {
				--#{$prefix}overlay-color: inherit;
				--#{$prefix}overlay-opacity: 0;
			}

			& > .#{$prefix}outline {
				--#{$prefix}outline-border-width: 1px;
			}

			& > .#{$prefix}glow {
				--#{$prefix}glow-opacity: 0;
			}
		}

		&--flat {
			& > .#{$prefix}outline {
				--#{$prefix}outline-border-width: 1px;
			}

			& > .#{$prefix}glow {
				--#{$prefix}glow-opacity: 0;
			}
		}

		&--text {
			--#{$prefix}input-padding-x: 0;

			& > .#{$prefix}outline {
				--#{$prefix}outline-border-width: 1px;
			}

			& > .#{$prefix}glow {
				--#{$prefix}glow-opacity: 0;
			}
		}
	}

	@each $size, $t in $_sizes {
		.#{$prefix}input--#{$size} {
			--#{$prefix}input-height: #{map.get($t, height)};
			--#{$prefix}input-padding-y: #{map.get($t, py)};
			--#{$prefix}input-padding-x: #{map.get($t, px)};
			--#{$prefix}input-font-size: #{map.get($t, fs)};
			--#{$prefix}input-border-radius: #{map.get($t, radius)};
			--#{$prefix}input-line-height: 1;
		}

		.#{$prefix}input--#{$size} .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
			--#{$prefix}icon-font-size-default: #{map.get($t, icon)};
		}
	}

	.#{$prefix}input--filled {
		--#{$prefix}input-color: rgba(0, 0, 0, 0.87);
		--#{$prefix}input-placeholder-color: rgba(0, 0, 0, 0.6);

		& > .#{$prefix}overlay {
			--#{$prefix}overlay-color: #fff;
			--#{$prefix}overlay-opacity: 1;
		}

		& > .#{$prefix}outline {
			--#{$prefix}outline-border-color: transparent;
			--#{$prefix}outline-focus-opacity: 1;
		}
	}

	.#{$prefix}input--filled.#{$prefix}input--light {
		& > .#{$prefix}overlay {
			--#{$prefix}overlay-color: #fff;
			--#{$prefix}overlay-opacity: 0.8;
			--#{$prefix}_hover-overlay-opacity: 1;
			--#{$prefix}_focus-overlay-opacity: 1;
		}

		& > .#{$prefix}outline {
			--#{$prefix}outline-border-color: transparent;
			--#{$prefix}outline-focus-border-color: #fff;
			--#{$prefix}outline-focus-opacity: 1;
		}
	}

	.#{$prefix}input--outlined {
		--#{$prefix}input-color: rgba(0, 0, 0, 0.87);
		--#{$prefix}input-placeholder-color: rgba(0, 0, 0, 0.6);

		& > .#{$prefix}overlay {
			--#{$prefix}overlay-color: inherit;
			--#{$prefix}overlay-opacity: 0;
		}

		& > .#{$prefix}outline {
			--#{$prefix}outline-border-color: currentColor;
			--#{$prefix}outline-opacity: 0.4;
			--#{$prefix}outline-hover-opacity: 0.6;
			--#{$prefix}outline-focus-opacity: 1;
		}
	}

	.#{$prefix}input--outlined.#{$prefix}input--light {
		--#{$prefix}input-color: #fff;
		--#{$prefix}input-placeholder-color: rgba(255, 255, 255, 0.6);

		& > .#{$prefix}overlay {
			--#{$prefix}overlay-color: inherit;
			--#{$prefix}overlay-opacity: 0;
		}

		& > .#{$prefix}outline {
			--#{$prefix}outline-border-color: #fff;
			--#{$prefix}outline-opacity: 0.24;
			--#{$prefix}outline-hover-opacity: 0.36;
			--#{$prefix}outline-focus-border-color: #fff;
			--#{$prefix}outline-focus-opacity: 1;
		}
	}

	.#{$prefix}input--flat {
		--#{$prefix}input-color: rgba(0, 0, 0, 0.87);
		--#{$prefix}input-placeholder-color: rgba(0, 0, 0, 0.6);

		& > .#{$prefix}overlay {
			--#{$prefix}overlay-color: inherit;
			--#{$prefix}overlay-opacity: 0.08;
			--#{$prefix}_hover-overlay-opacity: 0.12;
		}

		& > .#{$prefix}outline {
			--#{$prefix}outline-border-color: transparent;
			--#{$prefix}outline-focus-opacity: 1;
		}
	}

	.#{$prefix}input--flat.#{$prefix}input--light {
		--#{$prefix}input-color: #fff;
		--#{$prefix}input-placeholder-color: rgba(255, 255, 255, 0.6);

		& > .#{$prefix}overlay {
			--#{$prefix}overlay-color: #fff;
			--#{$prefix}overlay-opacity: 0.12;
			--#{$prefix}_hover-overlay-opacity: 0.16;
		}

		& > .#{$prefix}outline {
			--#{$prefix}outline-border-color: transparent;
			--#{$prefix}outline-focus-border-color: #fff;
			--#{$prefix}outline-focus-opacity: 1;
		}
	}

	.#{$prefix}input--text {
		--#{$prefix}input-placeholder-color: rgba(0, 0, 0, 0.6);

		& > .#{$prefix}overlay {
			--#{$prefix}overlay-color: inherit;
			--#{$prefix}overlay-opacity: 0;
		}

		& > .#{$prefix}outline {
			--#{$prefix}outline-border-color: transparent;
		}
	}

	.#{$prefix}input--text.#{$prefix}input--light {
		--#{$prefix}input-color: #fff;
		--#{$prefix}input-placeholder-color: rgba(255, 255, 255, 0.6);

		& > .#{$prefix}overlay {
			--#{$prefix}overlay-color: transparent;
			--#{$prefix}overlay-opacity: 0;
		}

		& > .#{$prefix}outline {
			--#{$prefix}outline-border-color: transparent;
		}
	}
}