/*
Menubar

<div class="menubar" role="menubar" data-menubar>
  <div class="menubar-menu" data-menu-root data-menubar-menu data-value>   display: contents
    <button class="menubar-trigger" role="menuitem" data-menubar-trigger data-state data-highlighted>
    <div class="menu menubar-content" role="menu" popover="manual">        ../menu/style.css

Triggers are control-tier rows inside a control-height bar. Open and
highlighted change colors only.
*/

@import "https://assets.elements.dev/assets/node_modules/@elements/ui/menu/style.c2acf403fd6c6bb9.css";

@layer components {

.menubar {
  display:        flex;
  align-items:    center;
  gap:            var(--space-1);
  box-sizing:     border-box;
  width:          max-content;
  max-width:      100%;
  height:         var(--control-height);
  padding:        var(--overlay-padding);
  overflow-x:     auto;
  background:     var(--control-bg);
  border:         var(--control-border-width) solid var(--control-border);
  border-radius:  var(--radius-control);
  box-shadow:     var(--control-shadow);
  font-family:    var(--font-ui);
  scrollbar-width: none;
}

.menubar-menu {
  display: contents;
}

.menubar-trigger {
  display:         inline-flex;
  flex:            none;
  align-items:     center;
  gap:             var(--item-gap);
  box-sizing:      border-box;
  height:          100%;
  margin:          0;
  padding:         0 var(--item-padding-x);
  color:           var(--ink);
  background:      transparent;
  border:          0;
  border-radius:   var(--radius-item);
  box-shadow:      none;
  font-family:     var(--font-ui);
  font-size:       var(--text-ui);
  font-weight:     var(--weight-ui);
  letter-spacing:  var(--tracking-ui);
  text-transform:  var(--case-ui);
  line-height:     var(--leading-none);
  white-space:     nowrap;
  cursor:          default;
  user-select:     none;
  outline:         none;
  transition:      none;
}

.menubar-trigger:active {
  transform: none;
}

.menubar-trigger .icon {
  width:  var(--icon-size);
  height: var(--icon-size);
}

.menubar-trigger:hover,
.menubar-trigger[data-highlighted],
.menubar-trigger[data-state="open"] {
  background: var(--item-highlight);
  color:      var(--item-highlight-ink);
}

.menubar-trigger:focus-visible {
  box-shadow: inset 0 0 0 var(--focus-ring-width) var(--focus);
}

.menubar-trigger[data-disabled] {
  color:      var(--ink-faint);
  background: transparent;
  cursor:     not-allowed;
}

.menubar-content {
  min-width: var(--space-48);
}

/* A vertical bar: triggers stack as item-height rows, as wide as the widest. */
.menubar[data-orientation="vertical"] {
  flex-direction: column;
  align-items:    stretch;
  height:         auto;
  overflow-x:     visible;
}

.menubar[data-orientation="vertical"] .menubar-trigger {
  height: var(--item-height);
}

}


/* FORCED COLORS -------------------------------------------------------------
   High contrast drops the inset box-shadow ring and the highlight fill, so a
   focused or open trigger would look like a resting one. Both become an
   outline in Highlight, drawn inside the trigger as the ring was. */

@layer components {

@media (forced-colors: active) {
  .menubar-trigger:focus-visible,
  .menubar-trigger[data-state="open"] {
    outline:        var(--focus-ring-width) solid Highlight;
    outline-offset: calc(-1 * var(--focus-ring-width));
  }

  .menubar-trigger[data-disabled] {
    color: GrayText;
  }
}

}