site-toolbar {
  --toolbar-height: 195px;
  --toolbar-padding: 24px;
  --toolbar-logo-width: min(347.875px, calc(100vw - 130px));
  --toolbar-logo-height: 104px;
  display: block;
}

site-toolbar[size="large"] {
  --toolbar-height: 248px;
  --toolbar-logo-width: min(347.875px, calc(100vw - 130px));
  --toolbar-logo-height: 104px;
}

site-toolbar .toolbar-space {
  min-height: var(--toolbar-height);
}

site-toolbar .sticky-toolbar {
  position: fixed;
  z-index: 1000;
  inset: 0 0 auto;
  width: 100%;
  padding: var(--toolbar-padding) 0;
  background: #ffffff;
}

site-toolbar .toolbar-container {
  position: relative;
  width: min(calc(100% - 48px), 1160px);
  min-height: 0;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

site-toolbar .menu-button {
  position: absolute;
  left: 24px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1b1b1b;
  text-decoration: none;
}

site-toolbar .menu-button svg {
  display: block;
  padding: 6px;
  fill: currentColor;
}

site-toolbar .brand-container,
site-toolbar .brand-link,
site-toolbar .brand-link picture {
  display: block;
}

site-toolbar .brand-logo {
  width: var(--toolbar-logo-width);
  height: var(--toolbar-logo-height);
  max-height: var(--toolbar-logo-height);
  display: block;
  margin: 0 auto;
  object-fit: contain;
  transition: max-height 0.5s;
}

site-toolbar .brand-logo[style*="max-height: 64px"] {
  width: auto;
  height: auto;
}

@media (max-width: 767px) {
  site-toolbar {
    --toolbar-height: 112px;
    --toolbar-padding: 16px;
    --toolbar-logo-width: 224px;
    --toolbar-logo-height: 80px;
  }

  site-toolbar[size="large"] {
    --toolbar-height: 142px;
    --toolbar-padding: 24px;
    --toolbar-logo-width: min(209px, calc(100vw - 118px));
    --toolbar-logo-height: 94px;
  }

  site-toolbar[size="large"][mobile-size="compact"] {
    --toolbar-height: 112px;
    --toolbar-padding: 16px;
    --toolbar-logo-width: 224px;
    --toolbar-logo-height: 80px;
  }

  site-toolbar .toolbar-container {
    width: calc(100% - 48px);
  }

  site-toolbar:not([size="large"]) .menu-button,
  site-toolbar[size="large"][mobile-size="compact"] .menu-button {
    left: 0;
    width: 49.05px;
  }
}

@media (prefers-reduced-motion: reduce) {
  site-toolbar .brand-logo {
    transition-duration: 0.01ms;
  }
}