@import "../../stylesheets/_variables.scss";

.woocommerce-marketplace__search {
	grid-area: mktpl-search;
	background: $gutenberg-gray-100;
	border: 1.5px solid transparent;
	border-radius: 2px;
	display: flex;
	height: 40px;
	padding: 4px 8px 4px 12px;

	input[type="search"] {
		all: unset;
		flex-grow: 1;
	}

	&:focus-within {
		background: #fff;
		border-color: var(--wp-admin-theme-color, #3858e9);
	}

	@media (width <= $breakpoint-medium) {
		margin: $grid-unit-20 $grid-unit-20 $grid-unit-10 $grid-unit-20;
	}
}

.woocommerce-marketplace__search-button {
	all: unset;
	cursor: pointer;
}