$eps-text-field-color: tints(600);
$eps-text-field-dark-color: dark-tints(200);
$eps-text-field-background-color: theme-colors(light);
$eps-text-field-dark-background-color: dark-tints(700);
$eps-text-field-outlined-border-color: tints(300);
$eps-text-field-outlined-dark-border-color: dark-tints(400);
$eps-text-field-outlined-focus-border-color: tints(400);
$eps-text-field-outlined-focus-dark-border-color: dark-tints(300);
$eps-text-field-placeholder-color: tints(500);
$eps-text-field-placeholder-dark-color: dark-tints(300);

@mixin font-style {
	font-family: $eps-font-family;
	font-size: $eps-body-font-size;
	font-weight: $eps-font-weight-base;
	line-height: $eps-line-height-base;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

$root: eps-text-field;

.#{$root} {
	--eps-text-field-color: #{$eps-text-field-color};
	--eps-text-field-background-color: #{$eps-text-field-background-color};
	--eps-text-field-placeholder-color: #{$eps-text-field-placeholder-color};
	--eps-text-field-outlined-border-color: #{$eps-text-field-outlined-border-color};
	--eps-text-field-outlined-focus-border-color: #{$eps-text-field-outlined-focus-border-color};

	width: 100%;
	color: var(--eps-text-field-color);
	background-color: var(--eps-text-field-background-color);
	border: 0;
	outline: none;
	@include font-style;

	&--outlined {
		border-radius: $eps-radius;
		border: $eps-border-width $eps-border-style var(--eps-text-field-outlined-border-color);
		padding: spacing(10);

		&:focus {
			border-color: var(--eps-text-field-outlined-focus-border-color);
		}
	}

	&::placeholder {
		color: var(--eps-text-field-placeholder-color);
		@include font-style;
	}
}

.eps-theme-dark {
	.#{$root} {
		--eps-text-field-color: #{$eps-text-field-dark-color};
		--eps-text-field-background-color: #{$eps-text-field-dark-background-color};
		--eps-text-field-placeholder-color: #{$eps-text-field-placeholder-dark-color};
		--eps-text-field-outlined-border-color: #{$eps-text-field-outlined-dark-border-color};
		--eps-text-field-outlined-focus-border-color: #{$eps-text-field-outlined-focus-dark-border-color};
	}
}