@use 'sass:map';
@use '../../base/maps/tokens' as *;
@use '../../base/mixins/typography' as font;
@use '../../base/functions' as *;

.input {
	place-items: center left;
	border-width: 0.0625rem;
	border-style: solid;
	border-radius: 0.25rem;
	display: inline-flex;
	padding: var(--padding-extra-small) var(--padding-small);
	position: relative;
	text-align: left;
	width: 100%;
	min-height: 3.125rem;
	outline: transparent solid 0.1875rem;
	transition: border-color var(--transition-fast);

	@include font.get-typography(body-small);

	background-color: var(--ui-fill);
	border-color: var(--ui-stroke);
	color: var(--ui-text);

	&::placeholder {
		color: var(--ui-text);
		opacity: 0.5;
	}

	&:hover {
		border-color: var(--action);
	}

	&.disabled {
		opacity: 0.5;
		cursor: not-allowed;
		pointer-events: none;
	}

	&.danger {
		border-color: var(--fail);
		color: var(--fail);
	}
}