.woocommerce-search.woocommerce-select-control {
	position: relative;

	.woocommerce-select-control__control-icon {
		position: absolute;
		top: 50%;
		left: 10px;
		transform: translateY(-50%);
		color: $gray-400;
		font-size: 20px;
	}

	&:not(.has-inline-tags) {
		.woocommerce-tag {
			margin: 8px 6px 0 0;
		}
	}

	.woocommerce-select-control__control {
		height: auto;
		border: 1px solid $gray-400;
		font-size: 13px;
		width: 100%;
		padding: 3px 2px 3px 36px;
		border-radius: 4px;
		border-color: $gray-700;
		box-shadow: $shadow-popover;

		&.is-active {
			border-color: var(--wp-admin-theme-color);
		}
	}

	.components-base-control .woocommerce-select-control__control-input {
		margin: 0;
		font-size: 13px;
		min-height: auto;

		&[type='number']::-webkit-outer-spin-button,
		&[type='number']::-webkit-inner-spin-button {
			-webkit-appearance: none;
			margin: 0;
		}
	}

	.components-base-control .components-base-control__label {
		font-size: 13px;
		color: #72777c;
		margin: 0;
		width: calc(100% - 36px);
		top: 50%;
		left: 36px;
	}

	.is-active.components-base-control .components-base-control__label,
	.with-value.components-base-control .components-base-control__label,
	&.has-inline-tags
	.has-tags.components-base-control
	.components-base-control__label {
		display: none;
	}

	.components-base-control .woocommerce-select-control__tags {
		margin: 0;
	}

	.components-base-control .woocommerce-tag {
		max-height: 24px;
	}

	.woocommerce-select-control__listbox {
		border: 1px solid $gray-400;
		top: 38px;
	}

	&.is-static-results .woocommerce-select-control__listbox {
		position: static;
	}

	// This a single `button` in the autocomplete popover
	.woocommerce-select-control__option {
		margin-bottom: 0;
		display: flex;
		flex-direction: row;
		flex-grow: 1;
		flex-shrink: 0;
		align-items: center;
		padding: $gap-small;
		color: $studio-woocommerce-purple;
		text-align: left;
		background: $gray-100;
		border-bottom: 1px solid $gray-100;
		font-size: 13px;
		min-height: 43px;
		height: auto;

		&:last-of-type {
			border-bottom: none;
		}

		&:hover {
			box-shadow: none;
			color: $studio-woocommerce-purple;
			background: $gray-200;
		}

		&.is-selected,
		&:focus,
		&:active {
			color: $studio-woocommerce-purple;
			background: $studio-white;
			box-shadow: inset 0 0 0 1px $gray-200,
				inset 0 0 0 2px $wp-admin-sidebar;
		}

		.woocommerce-search__result-thumbnail {
			margin-right: $gap-small;
		}
	}
}

.woocommerce-search__result-name {
	text-decoration: underline; // @todo Not actually a link, should underline?
}