.components-search-control {
	position: relative;

	input[type="search"].components-search-control__input {
		@include input-control;
		display: block;
		padding: $grid-unit-20 $grid-unit-60 $grid-unit-20 $grid-unit-20;
		background: $gray-100;
		border: none;
		width: 100%;
		height: $grid-unit-60;

		/* Fonts smaller than 16px causes mobile safari to zoom. */
		font-size: $mobile-text-min-font-size;
		@include break-small {
			font-size: $default-font-size;
		}

		&:focus {
			background: $white;
			box-shadow: inset 0 0 0 var(--gc-admin-border-width-focus) var(--gc-admin-theme-color);
		}

		&::placeholder {
			color: $gray-700;
		}

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

.components-search-control__icon {
	position: absolute;
	top: 0;
	right: ( $grid-unit-60 - $icon-size ) * 0.5;
	bottom: 0;
	display: flex;
	align-items: center;

	> svg {
		margin: $grid-unit-10 0;
	}
}

.components-search-control__input-wrapper {
	position: relative;
}