@use "../kit-deps" as *;
@use "typography" as *;

.input-group {
	display: flex;
	align-items: stretch;
	width: 100%;
	max-width: 600px;
	min-height: $control-height-lg;
	border: $border-width-base solid $color-text-light;
	border-bottom-width: $border-width-accent;
	background: $surface-panel-muted;
	transition-duration: $motion-base;
	transition-timing-function: $motion-ease;
	transition-property: border-color, background;

	&:focus-within {
		@include focus_ring;
		border-color: $color-secondary;
		background: transparent;
	}

	.input-group-addon,
	.input-group-action {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: $control-height-lg;
		padding: 0 $space-3;
		color: $color-text-medium;
		background: rgba($color-text-light, 0.045);
		border: 0;
		font-family: $font-family-base;
		font-size: $font-size-sm;
		font-weight: $font-weight-semibold;
		text-transform: uppercase;
	}

	.input-group-action {
		color: $color-primary;
		cursor: pointer;
		transition-duration: $motion-base;
		transition-timing-function: $motion-ease;
		transition-property: color, background;

		@include hover_touch {
			color: $color-black;
			background: $color-warning;
		}
	}

	.input-group-input {
		flex: 1 1 auto;
		min-width: 0;
		border: 0;
		padding: $space-3 $space-4;
		color: $color-text-light;
		background: transparent;
		font-family: $font-family-base;
		font-size: $font-size-base;
		font-weight: $font-weight-medium;
		letter-spacing: $letter-spacing-wide;

		&:focus {
			outline: none;
		}

		&::placeholder {
			color: $color-text-dark;
		}
	}

	.ph,
	.ph-bold {
		font-size: $icon-size-md;
	}

	&.input-group-compact {
		min-height: $control-height-md;

		.input-group-addon,
		.input-group-action {
			min-width: $control-height-md;
		}

		.input-group-input {
			padding: $space-2 $space-3;
			font-size: $font-size-sm;
		}
	}
}

.search-field {
	max-width: 420px;
}