.a11y-command-menu-button {
  --a11y-command-menu-bg: #171717;
  --a11y-command-menu-color: #f7f7f4;
  --a11y-command-menu-muted-color: #b6b4b0;
  --a11y-command-menu-border-color: rgb(255 255 255 / 0.34);
  --a11y-command-menu-item-border-color: rgb(255 255 255 / 0.12);
  --a11y-command-menu-item-active-bg: rgb(255 255 255 / 0.1);
  --a11y-command-menu-item-disabled-opacity: 0.56;
  --a11y-command-menu-radius: 1.25rem;
  --a11y-command-menu-item-radius: 0.875rem;
  --a11y-command-menu-shadow: 0 1.25rem 3rem rgb(0 0 0 / 0.42);
  --a11y-command-menu-padding: 0.5rem;
  --a11y-command-menu-gap: 0.25rem;
  --a11y-command-menu-min-width: 18rem;
  --a11y-command-menu-max-width: 24rem;
  --a11y-command-menu-z-index: 1000;
  --a11y-command-menu-item-gap: 0.75rem;
  --a11y-command-menu-item-padding: 0.75rem 0.8rem;
  --a11y-command-menu-focus-ring: 3px solid currentColor;
  --a11y-command-menu-focus-offset: 4px;
  --a11y-command-menu-transition-duration: 160ms;
  --a11y-command-menu-transition-easing: cubic-bezier(0.2, 0, 0.2, 1);

  --_command-menu-x: 0px;
  --_command-menu-y: 0px;
  --_command-menu-origin-x: left;
  --_command-menu-origin-y: top;
  --_command-menu-max-height: min(24rem, calc(100vh - 2rem));
  --_command-menu-max-height: min(24rem, calc(100dvh - 2rem));
  --_command-submenu-x: 0px;
  --_command-submenu-y: 0px;
  --_command-submenu-origin-x: left;
  --_command-submenu-origin-y: top;

  position: relative;
  text-align: start;
}

.a11y-command-menu-button__trigger {
  cursor: pointer;
}

.a11y-command-menu-button__trigger:focus-visible,
.a11y-command-menu-button__item:focus-visible {
  outline: var(--a11y-command-menu-focus-ring);
  outline-offset: var(--a11y-command-menu-focus-offset);
}

.a11y-command-menu-button__panel,
.a11y-command-menu-button__submenu {
  position: fixed;
  inset-inline-start: var(--_command-menu-x);
  inset-block-start: var(--_command-menu-y);
  z-index: var(--a11y-command-menu-z-index);
  min-inline-size: var(--a11y-command-menu-min-width);
  max-inline-size: var(--a11y-command-menu-max-width);
  max-block-size: var(--_command-menu-max-height);
  overflow: auto;
  padding: var(--a11y-command-menu-padding);
  border: 1px solid var(--a11y-command-menu-border-color);
  border-radius: var(--a11y-command-menu-radius);
  background: var(--a11y-command-menu-bg);
  color: var(--a11y-command-menu-color);
  box-shadow: var(--a11y-command-menu-shadow);
  transform-origin: var(--_command-menu-origin-x) var(--_command-menu-origin-y);
}

.a11y-command-menu-button.is-open .a11y-command-menu-button__panel:not([hidden]),
.a11y-command-menu-button__submenu:not([hidden]) {
  animation: a11y-command-menu-in var(--a11y-command-menu-transition-duration)
    var(--a11y-command-menu-transition-easing) both;
}

.a11y-command-menu-button__submenu {
  inset-inline-start: var(--_command-submenu-x);
  inset-block-start: var(--_command-submenu-y);
  transform-origin: var(--_command-submenu-origin-x) var(--_command-submenu-origin-y);
  z-index: calc(var(--a11y-command-menu-z-index) + 1);
}

.a11y-command-menu-button__panel[hidden],
.a11y-command-menu-button__submenu[hidden] {
  display: none;
}

.a11y-command-menu-button__list {
  display: grid;
  gap: var(--a11y-command-menu-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.a11y-command-menu-button__item {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--a11y-command-menu-item-gap);
  inline-size: 100%;
  min-block-size: 3rem;
  padding: var(--a11y-command-menu-item-padding);
  border: 1px solid transparent;
  border-radius: var(--a11y-command-menu-item-radius);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

a.a11y-command-menu-button__item {
  text-decoration: none;
}

.a11y-command-menu-button__item:hover:not([aria-disabled="true"]),
.a11y-command-menu-button__item.is-active,
.a11y-command-menu-button__item[aria-expanded="true"] {
  border-color: var(--a11y-command-menu-item-border-color);
  background: var(--a11y-command-menu-item-active-bg);
}

.a11y-command-menu-button__item[aria-disabled="true"],
.a11y-command-menu-button__item.is-disabled {
  opacity: var(--a11y-command-menu-item-disabled-opacity);
  cursor: not-allowed;
}

.a11y-command-menu-button__item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  border: 1px solid var(--a11y-command-menu-item-border-color);
  border-radius: 0.75rem;
  background: rgb(255 255 255 / 0.08);
}

.a11y-command-menu-button__checkmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  font-weight: 900;
  line-height: 1;
}

.a11y-command-menu-button__item[role="menuitemcheckbox"][aria-checked="true"]
  > .a11y-command-menu-button__checkmark::before {
  content: "✓";
}

.a11y-command-menu-button__item[role="menuitemcheckbox"][aria-checked="mixed"]
  > .a11y-command-menu-button__checkmark::before {
  content: "−";
}

.a11y-command-menu-button__item[role="menuitemradio"][aria-checked="true"]
  > .a11y-command-menu-button__checkmark::before {
  content: "●";
}

.a11y-command-menu-button__item-content {
  min-inline-size: 0;
}

.a11y-command-menu-button__item-content:first-child {
  grid-column: 1 / 3;
}

.a11y-command-menu-button__item-content:first-child:last-child {
  grid-column: 1 / -1;
}

.a11y-command-menu-button__item-label {
  display: block;
  color: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.a11y-command-menu-button__item-meta {
  display: block;
  margin-block-start: 0.2rem;
  color: var(--a11y-command-menu-muted-color);
  font-size: 0.8125rem;
  line-height: 1.35;
}

.a11y-command-menu-button__item-arrow {
  justify-self: end;
  color: var(--a11y-command-menu-muted-color);
  font-size: 1.25rem;
}

.a11y-command-menu-button__separator {
  block-size: 1px;
  margin-block: 0.375rem;
  background: var(--a11y-command-menu-item-border-color);
}

.a11y-command-menu-button__section-label {
  padding: 0.375rem 0.75rem 0.125rem;
  color: var(--a11y-command-menu-muted-color);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.a11y-command-menu-button__shortcut {
  justify-self: end;
  padding: 0.15rem 0.4rem;
  border: 1px solid var(--a11y-command-menu-item-border-color);
  border-radius: 0.5rem;
  color: var(--a11y-command-menu-muted-color);
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.2;
}

.a11y-command-menu-button__panel[data-placement="top"] {
  --_command-menu-origin-y: bottom;
}

.a11y-command-menu-button__panel[data-placement="bottom"] {
  --_command-menu-origin-y: top;
}

.a11y-command-menu-button__submenu[data-placement="right"] {
  --_command-submenu-origin-x: left;
}

.a11y-command-menu-button__submenu[data-placement="left"] {
  --_command-submenu-origin-x: right;
}

@keyframes a11y-command-menu-in {
  from {
    opacity: 0;
    transform: translateY(0.25rem) scale(0.98);
  }
}

@media (max-width: 42rem) {
  .a11y-command-menu-button__panel:not([data-command-mobile-mode="menu"]),
  .a11y-command-menu-button__submenu:not([data-command-mobile-mode="menu"]) {
    inset-inline: 0.75rem;
    inset-block: auto 0.75rem;
    inline-size: auto;
    min-inline-size: auto;
    max-inline-size: none;
    max-block-size: min(70vh, 32rem);
    max-block-size: min(70dvh, 32rem);
  }
}

@media (pointer: coarse) {
  .a11y-command-menu-button__item {
    min-block-size: 3.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .a11y-command-menu-button,
  .a11y-command-menu-button *,
  .a11y-command-menu-button *::before,
  .a11y-command-menu-button *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

@media (forced-colors: active) {
  .a11y-command-menu-button__panel,
  .a11y-command-menu-button__submenu {
    border: 1px solid CanvasText;
    background: Canvas;
    color: CanvasText;
    box-shadow: none;
  }

  .a11y-command-menu-button__trigger:focus-visible,
  .a11y-command-menu-button__item:focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 3px;
  }

  .a11y-command-menu-button__item.is-active,
  .a11y-command-menu-button__item[aria-expanded="true"] {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }

  .a11y-command-menu-button__item.is-active *,
  .a11y-command-menu-button__item[aria-expanded="true"] * {
    color: HighlightText;
  }

  .a11y-command-menu-button__checkmark {
    color: CanvasText;
  }

  .a11y-command-menu-button__item.is-active .a11y-command-menu-button__checkmark {
    color: HighlightText;
  }
}