
$eps-text-field-border-color: tints(300);
$eps-text-field-dark-border-color: dark-tints(700);
$eps-text-field-focus-border-color: tints(600);
$eps-text-field-focus-dark-border-color: dark-tints(300);

$eps-text-field-color: tints(600);
$eps-text-field-dark-color: dark-tints(200);
$eps-text-field-background-color: transparent;
$eps-text-field-dark-background-color: transparent;
$eps-text-field-outlined-border-color: $eps-text-field-border-color;
$eps-text-field-outlined-dark-border-color: $eps-text-field-dark-border-color;
$eps-text-field-outlined-focus-border-color: $eps-text-field-focus-border-color;
$eps-text-field-outlined-focus-dark-border-color: $eps-text-field-focus-dark-border-color;
$eps-text-field-placeholder-color: tints(500);
$eps-text-field-placeholder-dark-color: dark-tints(300);

$eps-text-field-standard-border-color: $eps-text-field-border-color;
$eps-text-field-standard-dark-border-color: $eps-text-field-dark-border-color;
$eps-text-field-standard-focus-border-color: tints(600);
$eps-text-field-standard-focus-dark-border-color: $eps-text-field-focus-dark-border-color;

@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;
}

$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};
	--eps-text-field-standard-border-color: #{$eps-text-field-standard-border-color};
	--eps-text-field-standard-focus-border-color: #{$eps-text-field-standard-focus-border-color};
	--border: #{$eps-border-width $eps-border-style var(--eps-text-field-outlined-border-color)};

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

	&--outlined {
		border-radius: $eps-radius;
		border: var(--border);
		padding: spacing(10);

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

	&--standard {
		padding-top: spacing(10);
		padding-bottom: spacing(10);
		border-bottom: var(--border);

		&:focus {
			border-color: var(--eps-text-field-standard-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};
	}

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

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

	&--standard {
		border-color: var(--eps-text-field-standard-border-color);

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


