@use '@talend/design-tokens/lib/tokens' as tokens;

$standard-input-height: calc(2rem - 0.125rem);

@mixin base-input() {
	background: transparent;
	color: tokens.$coral-color-neutral-text;
	padding: tokens.$coral-spacing-xs;
	font: tokens.$coral-paragraph-m;
	line-height: 1;
	border: 0;
	margin: 0;
	transition: tokens.$coral-transition-instant;
	display: block;
	flex-grow: 1;
	width: 100%;

	&:only-child {
		border-radius: tokens.$coral-radius-s;
	}

	&:disabled,
	&_disabled {
		color: tokens.$coral-color-neutral-text-disabled;
		cursor: not-allowed;
	}

	&_readOnly {
		color: tokens.$coral-color-neutral-text;
	}

	&:focus {
		outline: 0;
	}

	&:disabled {
		color: tokens.$coral-color-neutral-text-disabled;
	}

	&::placeholder {
		color: tokens.$coral-color-neutral-text-weak;
		opacity: tokens.$coral-opacity-s;
	}

	&[disabled] {
		opacity: 1;

		> option {
			color: tokens.$coral-color-neutral-text;
		}
	}
}

@mixin border-styles() {
	border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border;
	box-shadow: 0 0 0 0 transparent;
	border-radius: tokens.$coral-radius-s;
	transition: tokens.$coral-transition-instant;
	background: tokens.$coral-color-neutral-background;

	&:hover {
		border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-strong-hover;
	}

	&_disabled {
		border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-disabled;
	}

	&_readOnly {
		border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak;
		background: tokens.$coral-color-neutral-background-strong;
	}

	&_disabled:hover {
		border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-disabled;
	}

	&_readOnly:hover {
		border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak;
	}

	&:focus-within,
	&:focus {
		border: tokens.$coral-border-s-solid tokens.$coral-color-accent-border;
		box-shadow: 0 0 0 0.0625rem tokens.$coral-color-accent-border;
	}

	&_borderError {
		border: tokens.$coral-border-s-solid tokens.$coral-color-danger-border;

		&:hover {
			border: tokens.$coral-border-s-solid tokens.$coral-color-danger-border-hover;
		}

		&:focus-within,
		&:focus {
			border: tokens.$coral-border-s-solid tokens.$coral-color-danger-border;
			box-shadow: 0 0 0 0.0625rem tokens.$coral-color-danger-border;
		}
	}
}