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

.radio input[type='radio'],
.radio-inline input[type='radio'],
.checkbox input[type='checkbox'],
.checkbox-inline input[type='checkbox'] {
	margin-left: 0;
}

input::-ms-clear {
	display: none;
}

.form-control {
	padding: 0 10px;
	margin-bottom: $padding-smaller;
	color: tokens.$coral-color-neutral-text;
	background-color: transparent;
	border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border;
	font-weight: normal;
	box-shadow: none;

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

	&:focus {
		border-width: 2px;
		border-color: tokens.$coral-color-accent-border;
		box-shadow: none;
	}

	&[disabled] {
		border-color: tokens.$coral-color-neutral-border-disabled;
	}

	&[disabled],
	&[readonly],
	&[readonly]:focus {
		border-width: 0;
		color: tokens.$coral-color-neutral-text;
		background-color: tokens.$coral-color-neutral-background-strong;
		border-color: tokens.$coral-color-neutral-border-weak;
	}

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

.has-error .form-control {
	border-color: tokens.$coral-color-danger-border;
}