.menubar.menubar--macos {
  --mb-bar-bg: rgba(246, 246, 247, .86);
  --mb-bar-border: rgb(0 0 0 / 8%);
  --mb-bar-text: #1d1d1f;
  --mb-menu-bg: rgba(247, 247, 249, .88);
  --mb-menu-border: rgb(0 0 0 / 12%);
  --mb-menu-shadow:
    0 14px 36px rgb(0 0 0 / 18%),
    0 1px 1px rgb(0 0 0 / 12%);
  --mb-hover-bg: #0a64d8;
  --mb-hover-text: #fff;
  --mb-disabled-text: rgb(60 60 67 / 38%);
  --mb-separator: rgb(60 60 67 / 18%);
  --mb-radius: 7px;
  backdrop-filter: blur(18px) saturate(1.25);
  font-size: 13px;
  min-height: 28px;
}

@media (prefers-color-scheme: dark) {
  .menubar.menubar--macos {
    --mb-bar-bg: rgba(38, 38, 42, .78);
    --mb-bar-border: rgb(255 255 255 / 10%);
    --mb-bar-text: #f5f5f7;
    --mb-menu-bg: rgba(45, 45, 50, .86);
    --mb-menu-border: rgb(255 255 255 / 14%);
    --mb-menu-shadow:
      0 18px 42px rgb(0 0 0 / 48%),
      0 1px 1px rgb(255 255 255 / 8%);
    --mb-hover-bg: #0a84ff;
    --mb-hover-text: #fff;
    --mb-disabled-text: rgb(235 235 245 / 32%);
    --mb-separator: rgb(235 235 245 / 18%);
  }
}

.menubar.menubar--macos .menubar__button {
  border-radius: 4px;
  min-height: 22px;
  margin: 3px 1px;
  padding: 0 9px;
}

.menubar.menubar--macos .menubar__app-icon {
  border-radius: 4px;
  min-height: 22px;
  margin: 3px 1px 3px 4px;
  padding: 0 7px;
}

.menubar.menubar--macos .menubar__app-icon-image {
  height: 16px;
  width: 16px;
}

.menubar.menubar--macos .menubar__menu[data-open="true"] > .menubar__button,
.menubar.menubar--macos .menubar__button:focus-visible {
  background: var(--mb-hover-bg);
  color: var(--mb-hover-text);
}

.menubar.menubar--macos .menubar__items {
  backdrop-filter: blur(24px) saturate(1.4);
  min-width: 218px;
  padding: 5px;
}

.menubar.menubar--macos .menubar__item {
  border-radius: 4px;
  font-size: 13px;
  gap: 24px;
  grid-template-columns: minmax(132px, 1fr) auto;
  min-height: 22px;
  padding: 2px 8px;
}

.menubar.menubar--macos .menubar__separator {
  margin: 4px 6px;
}

.menubar.menubar--macos .menubar__submenu > .menubar__item::after {
  content: "›";
  font-size: 16px;
  line-height: 1;
}

@media (prefers-reduced-transparency: reduce) {
  .menubar.menubar--macos {
    --mb-bar-bg: #f6f6f7;
    --mb-menu-bg: #f7f7f9;
    backdrop-filter: none;
  }

  .menubar.menubar--macos .menubar__items {
    backdrop-filter: none;
  }
}

@media (prefers-color-scheme: dark) and (prefers-reduced-transparency: reduce) {
  .menubar.menubar--macos {
    --mb-bar-bg: #26262a;
    --mb-menu-bg: #2d2d32;
  }
}

@media (prefers-contrast: more) {
  .menubar.menubar--macos {
    --mb-bar-bg: Canvas;
    --mb-bar-border: currentColor;
    --mb-bar-text: CanvasText;
    --mb-menu-bg: Canvas;
    --mb-menu-border: currentColor;
    --mb-hover-bg: Highlight;
    --mb-hover-text: HighlightText;
    --mb-disabled-text: GrayText;
    --mb-separator: currentColor;
    backdrop-filter: none;
  }

  .menubar.menubar--macos .menubar__items {
    backdrop-filter: none;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .menubar.menubar--macos,
  .menubar.menubar--macos * {
    scroll-behavior: auto;
    transition-duration: 0s;
  }
}

@media (forced-colors: active) {
  .menubar.menubar--macos {
    backdrop-filter: none;
  }

  .menubar.menubar--macos .menubar__items {
    backdrop-filter: none;
  }
}