// vf-global-header @import 'package.variables.scss'; // Debug information from component's `package.json`: // --- /*! * Component: #{map-get($componentInfo, 'name')} * Version: #{map-get($componentInfo, 'version')} * Location: #{map-get($componentInfo, 'location')} */ $vf-global-header-background--color: ui-color(white); $vf-global-header__link-text--color: ui-color(black); .vf-global-header { align-items: center; background-color: $vf-global-header-background--color; box-sizing: border-box; display: flex; flex-wrap: wrap; gap: space(200); margin-top: space(200); & > [class*='logo'] { flex: 1; // necessary for when a logo is inside flex-based containers like vf-global-header } } .vf-global-header__site-name { @include set-type(text-body--3, $custom-margin-bottom: 0); } // These are only needed because the 'gap' propery is not in all browsers @media (min-width: $vf-breakpoint--md) { .vf-global-header__site-name { margin-left: .5rem; margin-right: .5rem; } }