:root{--menu-bar-button-size: 2.5em;--menu-bar-icon-size: 1em;--menu-bar-horizontal-gap: var(--space-xxs);--menu-bar-vertical-gap: 4px;--menu-bar-label-size: var(--text-xs)}.menu-bar{list-style:none;display:inline-flex;align-items:center}.menu-bar__item{position:relative;display:inline-block;display:flex;align-items:center;justify-content:center;height:var(--menu-bar-button-size);width:var(--menu-bar-button-size);border-radius:50%;cursor:pointer;transition:background-color .2s}.menu-bar__item:not(:last-child){margin-right:var(--menu-bar-horizontal-gap)}.menu-bar__item:hover,.menu-bar__item.menu-control--active{background-color:rgba(var(--color-contrast-higher), 0.1)}.menu-bar__item:hover>.menu-bar__icon,.menu-bar__item.menu-control--active>.menu-bar__icon{color:var(--color-contrast-higher)}.menu-bar__item:hover>.menu-bar__label,.menu-bar__item.menu-control--active>.menu-bar__label{clip:auto;clip-path:none;height:auto;width:auto}.menu-bar__item:focus{outline:none;background-color:rgba(var(--color-primary), 0.1)}.menu-bar__item:active{background-color:var(--color-contrast-low)}.menu-bar__item:focus:active{background-color:rgba(var(--color-primary), 0.2)}.menu-bar__item--trigger{display:none}.menu-bar__icon{display:block;color:var(--color-contrast-high);font-size:var(--menu-bar-icon-size);transition:color .2s}.menu-bar__label{position:absolute;z-index:var(--z-index-popover, 5);clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap;top:100%;left:50%;transform:translateX(-50%) translateY(var(--menu-bar-vertical-gap));padding:var(--space-xxs) var(--space-xs);color:var(--color-bg);background-color:rgba(var(--color-contrast-higher), 0.95);border-radius:var(--radius-md);font-size:var(--menu-bar-label-size);pointer-events:none;user-select:none}.menu-bar--collapsed .menu-bar__item--hide{display:none}.menu-bar--collapsed .menu-bar__item--trigger{display:inline-block;display:flex}.js .menu-bar{opacity:0}.js .menu-bar::before{display:none;content:"collapsed"}.js .menu-bar--loaded{opacity:1}@media(min-width: 32rem){.js .menu-bar--expanded\@xs::before{content:"expanded"}}@media(min-width: 48rem){.js .menu-bar--expanded\@sm::before{content:"expanded"}}@media(min-width: 64rem){.js .menu-bar--expanded\@md::before{content:"expanded"}}@media(min-width: 80rem){.js .menu-bar--expanded\@lg::before{content:"expanded"}}@media(min-width: 90rem){.js .menu-bar--expanded\@xl::before{content:"expanded"}}/*# sourceMappingURL=2_menu-bar.css.map */