// 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;
  }
}