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

.woocommerce-marketplace__header {
	align-items: center;
	background: #fff;
	border-bottom: 1px solid $gutenberg-gray-300;
	display: grid;
	grid-template: 'mktpl-title mktpl-search mktpl-meta' 60px
		'mktpl-tabs mktpl-tabs mktpl-tabs' auto / 1fr 320px 36px;
	left: 0;
	padding: 10px $content-spacing-large 0;
	position: absolute;
	top: -60px;
	width: 100%;

	/* On narrow screens, "stack" header items and hide the bottom border */
	@media (width <= $breakpoint-medium) {
		border-bottom: 0;
		grid-template: 'mktpl-title mktpl-meta' 60px
			'mktpl-tabs mktpl-tabs' 48px
			'mktpl-search mktpl-search' auto / auto 48px;
		padding: 0;
	}
}

.woocommerce-marketplace__header-title {
	align-items: center;
	align-self: stretch;
	display: flex;
	font-size: 14px;
	font-weight: 700;
	grid-area: mktpl-title;
	line-height: 18px;

	@media (width <= $breakpoint-medium) {
		padding: 0 $content-spacing-small;
	}
}

.woocommerce-marketplace__header-meta {
	grid-area: mktpl-meta;
	justify-self: end;

	@media (width <= $breakpoint-medium) {
		margin-right: $content-spacing-small;
	}
}

.woocommerce-marketplace__header-tabs {
	align-self: end;
	grid-area: mktpl-tabs;

	@media (width <= $breakpoint-medium) {
		padding: 0 $content-spacing-small;
	}
}

.woocommerce-marketplace__search {
	grid-area: mktpl-search;
	background: #f0f0f0;
	border-radius: 2px;
	display: flex;
	height: 40px;
	margin-right: $medium-gap;
	padding: 4px 8px 4px 12px;

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

	@media (width <= $breakpoint-medium) {
		margin: $content-spacing-small;
	}
}

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