@use "@gloria/a11y/_mixins.scss" as *;

.c-input-wrapper {
	position: relative;
	display: inline-flex;
	align-items: center;

	&--expanded {
		width: 100%;
	}

	.c-icon {
		position: absolute;
		color: var(--color-text-primary);

		&:first-child {
			left: var(--spacing-3);
		}

		&:last-child {
			right: var(--spacing-3);
		}
	}
}

.c-input {
	display: block;
	width: 100%;
	height: 40px;
	margin: 0;
	padding: var(--spacing-2) var(--spacing-4);
	border: 1px solid var(--color-gray-400);
	border-radius: var(--radius-1);
	appearance: none;
	outline: none;
	font-family: inherit;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-clip: padding-box;
	background-color: var(--color-common-white);
	color: var(--color-text-primary);

	@include a11y-keyboard-focus-ring;

	&:focus {
		@include a11y-focus-ring-outline;
	}

	&::-webkit-search-decoration,
	&::-webkit-search-cancel-button,
	&::-webkit-search-results-button,
	&::-webkit-search-results-decoration {
		display: none;
	}

	&::placeholder {
		transition: color var(--duration-normal) var(--cbuc-sine-out);
		font-size: var(--font-size-sm);
		color: var(--color-text-primary);

		@media (prefers-reduced-motion: reduce) {
			transition: none;
		}
	}

	&:disabled {
		background-color: var(--color-secondary-100-disabled);
		color: var(--color-text-disabled);
		border-color: var(--color-secondary-light-disabled);
		cursor: not-allowed;
	}

	&--with-icon {
		&.c-input--icon-left {
			padding-left: calc(var(--spacing-5) + var(--font-size-base));
		}

		&.c-input--icon-right {
			padding-right: calc(var(--spacing-5) + var(--font-size-base));
		}
	}
}
