@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; padding: 0 $content-spacing-large; 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 { font-size: 14px; font-weight: 600; margin: 0; padding: 10px 0 0; @media (width <= $breakpoint-medium) { padding-left: var(--large-gap); } } } .woocommerce-marketplace__header-title { align-items: center; align-self: stretch; display: flex; 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; padding-top: 10px; @media (width <= $breakpoint-medium) { margin-right: $content-spacing-small; padding: 0; } } .woocommerce-marketplace__header-tabs { align-self: end; grid-area: mktpl-tabs; @media (width <= $breakpoint-medium) { padding: 0 $content-spacing-small; } } .woocommerce-marketplace__search { margin-right: $medium-gap; margin-top: 10px; input[type='search'] { all: unset; flex-grow: 1; } @media (width <= $breakpoint-medium) { margin: $content-spacing-small; } }