@planningcenter/topbar 10.19.0 → 10.20.0-rc.1

package/dist/topbar.css

@@ -1,2 +1,783 @@
-:root{--topbar-height:56px;--topbar-slight-transition:120ms ease-in;--topbar-slight-transition-background:background-color var(--topbar-slight-transition);--topbar-scrollbar-color:var(--t-fill-color-transparency-dark-030) transparent;--topbar-scrollbar-width:thin;--topbar-nav-link-font-size:var(--t-font-size-sm);--topbar-nav-link-font-color:var(--t-text-color-default-headline);--topbar-nav-link-height:var(--t-container-size-md);--topbar-nav-link-background-color:transparent;--topbar-nav-link-padding-x:12px;--topbar-nav-link-border-color:transparent;--topbar-nav-link-border-radius:999px;--topbar-nav-link-transition:var(--topbar-slight-transition-background);--topbar-nav-link-background-color-hover:var(--t-fill-color-transparency-light-040);--topbar-nav-link-background-color-active:var(--t-fill-color-transparency-light-060);--topbar-nav-link-border-color-active:var(--t-fill-color-transparency-light-030);--toolbar-width:64px;--toolbar-inner-width:48px;--toolbar-drawer-width:360px;--toolbar-navbar-height:56px;--content-wrap-border-color:rgba(0,0,0,.08);--content-wrap-shadow-dimensions:0 -1px 0 0}@media (min-width:600px){:root{--topbar-height:64px;--content-wrap-shadow-dimensions:0 0 0 1px}}:root[data-color-mode=dark]{--topbar-nav-link-background-color-hover:var(--t-fill-color-transparency-light-020);--topbar-nav-link-background-color-active:var(--t-fill-color-transparency-light-030);--topbar-nav-link-border-color-active:var(--t-fill-color-transparency-light-010);--content-wrap-border-color:hsla(0,0%,100%,.04)}@media (prefers-color-scheme:dark){:root[data-color-mode=system]{--topbar-nav-link-background-color-hover:var(--t-fill-color-transparency-light-020);--topbar-nav-link-background-color-active:var(--t-fill-color-transparency-light-030);--topbar-nav-link-border-color-active:var(--t-fill-color-transparency-light-010);--content-wrap-border-color:hsla(0,0%,100%,.04)}}.page-wrap:has(div[class^=appmenu-layer][style*="display: block"],div[data-small-topbar-user-profile-menu-wrap][style*="display: block"]) .topbar-wrap{z-index:auto!important}.hide-scrollbar-9LCh9{-ms-overflow-style:none;scrollbar-width:none}.hide-scrollbar-9LCh9::-webkit-scrollbar{display:none}.announcement-pI5tM{align-items:center;background-color:rgba(0,0,0,.5);box-sizing:border-box;color:#f0f0f0;-moz-column-gap:var(--t-spacing-3);column-gap:var(--t-spacing-3);display:flex;font-size:var(--t-font-size-sm);padding:var(--t-spacing-2)}.announcement--platform-EcUn2{background-color:rgba(0,0,0,.6)}.announcement-icon-Ov39-{flex-grow:0;flex-shrink:0}.announcement-content-q2ad6{align-items:center;-moz-column-gap:var(--t-spacing-3);column-gap:var(--t-spacing-3);display:flex;flex-grow:1;justify-content:space-between}.announcement-pI5tM a{color:currentColor;text-decoration:underline}.announcement-pI5tM a:hover{color:currentColor;text-decoration:none}@media (min-width:600px){.announcement-pI5tM{padding-left:var(--t-spacing-3);padding-right:var(--t-spacing-3)}}.dismiss-wUAoU{border-width:0;margin:calc(var(--t-spacing-1)*-1);padding:var(--t-spacing-1)}.dismiss-wUAoU,.unbutton-lEbTR{-moz-appearance:none;appearance:none;background-color:transparent;cursor:pointer}.unbutton-lEbTR{border:none;display:inline-block;font-family:inherit;outline:0;padding:0}.button-XMbeQ{--_svg-display:none;align-items:center;color:var(--t-text-color-default-primary);display:flex;gap:var(--t-spacing-1);height:100%;padding-left:var(--t-spacing-1);padding-right:var(--t-spacing-1);transition:var(--topbar-slight-transition-background);white-space:nowrap}.button-XMbeQ svg[class^=chevron],.button-XMbeQ svg[data-logo=mono-app-text]{display:var(--_svg-display)}@media (min-width:720px){.button-XMbeQ{--_svg-display:block;padding-left:var(--t-spacing-2);padding-right:var(--t-spacing-2)}.button-XMbeQ svg[data-logo=color-app-icon]{height:24px;width:24px}}.button-accounts-nNh-z{color:var(--t-text-color-default-primary);font-size:var(--t-font-size-sm);font-weight:var(--t-font-weight-medium);margin-left:var(--t-spacing-quarter)}.chevron-RRg9k{border-radius:100%;display:block;padding:var(--t-spacing-fourth);transition:var(--topbar-slight-transition-background);transition-property:background-color,transform}.chevron-RRg9k polygon{transform:translateY(.5px)}.button-XMbeQ.is-expanded-zD0A0 .chevron-RRg9k,.button-XMbeQ:hover .chevron-RRg9k{background-color:var(--t-fill-color-transparency-light-050)}.button-XMbeQ.is-expanded-zD0A0 .chevron-RRg9k{transform:rotate(180deg)}.popup-sJ-Nv{left:var(--t-spacing-2);max-height:calc(100% - var(--topbar-height) - var(--t-spacing-3));min-width:180px;top:calc(var(--topbar-height) - var(--t-spacing-1))}.popup-root-SeL5u{align-self:flex-end;display:flex}.popup-nQXYW{background:var(--t-surface-color-card);border-radius:var(--t-border-radius-lg);box-shadow:0 0 0 1px rgba(0,0,0,.05),0 4px 12px 2px rgba(0,0,0,.16);opacity:0;overflow:auto;position:absolute;scrollbar-color:var(--topbar-scrollbar-color);scrollbar-width:var(--topbar-scrollbar-width);transition:all .12s ease-in;visibility:hidden}.popup-nQXYW.is-visible-3DAUP{opacity:1;transition:none;visibility:visible}.route--8BWe{align-items:center;border:1px solid var(--topbar-nav-link-border-color);border-radius:var(--topbar-nav-link-border-radius);color:var(--topbar-nav-link-font-color)!important;display:inline-flex;font-family:inherit;font-size:var(--topbar-nav-link-font-size);height:var(--topbar-nav-link-height);margin-right:var(--t-spacing-half);padding-left:var(--topbar-nav-link-padding-x);padding-right:var(--topbar-nav-link-padding-x);text-decoration:none;text-transform:capitalize;transition:var(--topbar-nav-link-transition);vertical-align:middle;white-space:nowrap}.route--8BWe:hover{background-color:var(--topbar-nav-link-background-color-hover)}.route--8BWe.is-active-FsU9Y,.route--8BWe:active{background-color:var(--topbar-nav-link-background-color-active);border-color:var(--topbar-nav-link-border-color-active)}.apps-routes-separator-Nlm-N{margin-right:var(--t-spacing-2)}@media (min-width:720px){.apps-routes-separator-Nlm-N{margin-right:var(--t-spacing-3)}}.popup-mDNKn{color:var(--t-text-color-default-primary);margin-top:calc(var(--t-spacing-1)*-1);max-height:calc(100% - var(--topbar-height) - var(--t-spacing-3));max-width:320px;min-width:242px;right:calc(var(--t-spacing-1) + 1px)}.trigger-wrap-Jd-KR{cursor:pointer;margin-left:var(--t-spacing-1);position:relative;white-space:nowrap}.trigger-WgRT5{align-items:center;-moz-appearance:none;appearance:none;background-color:var(--topbar-nav-link-background-color-active);border:1px solid var(--topbar-nav-link-border-color-active);border-radius:var(--topbar-nav-link-border-radius);color:var(--topbar-nav-link-font-color);cursor:pointer;display:flex;font-size:var(--topbar-nav-link-font-size);height:var(--topbar-nav-link-height);justify-content:center;min-width:var(--t-container-size-md);outline:0;padding:0 var(--topbar-nav-link-padding-x);transition:var(--topbar-nav-link-transition)}.trigger-WgRT5 svg{margin-left:calc(var(--t-spacing-1)*-1);margin-right:calc(var(--t-spacing-1)*-1);transition:transform var(--topbar-slight-transition)}.trigger-WgRT5.is-visible-GZC0- svg{transform:rotate(180deg)}.trigger-orgname-TDHCc{margin-right:var(--t-spacing-fourth);max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.trigger-orgname-TDHCc+svg{color:var(--t-fill-color-transparency-dark-050);margin-left:0;margin-right:calc(var(--t-spacing-fourth)*-1)}.avatar-tW-wn{background-color:#fff;background-position:50%;background-size:cover;border-radius:50%;height:var(--t-element-size-2xl);margin-left:var(--t-spacing-half);width:var(--t-element-size-2xl)}.appmenu-button-b0UvT{align-items:center;-moz-appearance:none;appearance:none;background-color:transparent;border-width:0;display:flex;height:100%;justify-content:center;padding-left:var(--t-spacing-2);padding-right:var(--t-spacing-3)}.appmenu-layer-0IQpN{-webkit-tap-highlight-color:transparent;background-color:var(--t-fill-color-transparency-dark-static-070);bottom:var(--toolbar-navbar-height);color:#000;display:none;left:0;position:fixed;right:0;top:0;-moz-user-select:none;user-select:none;z-index:100}.appmenu-container-gackd{background-color:var(--t-surface-color-card);display:flex;flex-direction:column;height:calc(100% - env(safe-area-inset-bottom));overflow:hidden;position:relative;width:calc(100% - var(--t-spacing-7))}.appmenu-scroll-mPSx0{overflow:auto;scrollbar-color:var(--topbar-scrollbar-color);scrollbar-width:var(--topbar-scrollbar-width)}.appmenu-list-h7clX{list-style:none;margin:0;padding:0}.appmenu-list-a-rGIQN{align-items:center;color:var(--t-text-color-default-primary);display:flex;font-size:var(--t-font-size-sm);min-height:var(--t-container-size-lg);padding:var(--t-spacing-half) var(--t-spacing-2);text-decoration:none}.appmenu-list-a--top-RT-2F{border-bottom:1px solid var(--t-border-color-default-base);min-height:var(--t-container-size-xl)}.appmenu-list-a--bottom-YDeBC{border-top:1px solid var(--t-border-color-default-base);min-height:var(--t-container-size-xl)}.appmenu-list-a--bottom-YDeBC svg{display:block;margin-left:calc(var(--t-spacing-fourth)*-1);margin-right:var(--t-spacing-half)}.appmenu-close-button-vv9bV{padding:0;position:absolute;right:var(--t-spacing-2);top:calc(var(--t-spacing-1) + var(--t-spacing-half))}.appmenu-close-button-vv9bV,.current-route-wpJgz{-moz-appearance:none;appearance:none;background-color:transparent;border-width:0}.current-route-wpJgz{align-items:center;color:var(--t-text-color-default-headline);-moz-column-gap:var(--t-spacing-half);column-gap:var(--t-spacing-half);display:flex;flex-grow:1;font:inherit;justify-content:center;line-height:var(--topbar-height);text-align:center}.current-route-wpJgz svg{transition:transform var(--topbar-slight-transition);vertical-align:middle}.current-route-wpJgz.is-active-wy8Bg svg{transform:rotate(180deg)}.routes-Nmt1S{background-color:var(--t-surface-color-card);box-shadow:0 0 0 1px rgba(0,0,0,.05),0 4px 12px 2px rgba(0,0,0,.16);display:flex;flex-direction:column;left:50%;max-height:calc(100% - var(--topbar-height) - 1px);max-width:360px;overflow:auto;padding:var(--t-spacing-2);position:absolute;row-gap:var(--t-spacing-half);scrollbar-color:var(--topbar-scrollbar-color);scrollbar-width:var(--topbar-scrollbar-width);top:calc(var(--topbar-height) - var(--t-spacing-half));transform:translateX(-50%);width:calc(100% - var(--t-spacing-4))}.route-kkknQ,.routes-Nmt1S{border-radius:var(--t-border-radius-lg)}.route-kkknQ{color:var(--t-text-color-default-primary);display:block;font-family:inherit;font-size:var(--t-font-size-sm);padding-bottom:12px;padding-top:12px;position:relative;text-align:center;text-decoration:none;text-transform:capitalize;white-space:nowrap}.route-kkknQ:hover{background-color:var(--t-fill-color-button-interaction-outline-dim-hover)}.route-kkknQ.is-active-wy8Bg{background-color:var(--t-fill-color-button-interaction-outline-dim-active);color:var(--t-text-color-default-headline);font-weight:var(--t-font-weight-semibold)}.profile-button-a2WO2{-moz-appearance:none;appearance:none;background-color:transparent;border-width:0;padding:var(--t-spacing-2)}.color-mode-switcher-JpczO{border:0;color:var(--t-text-color-default-primary);padding:0}.color-mode-switcher-label-3jPM2{display:inline-block;font-weight:var(--t-font-weight-semibold);margin-bottom:var(--t-spacing-1)}.color-mode-switcher-label-beta-pwv5t{background-color:var(--t-fill-color-status-neutral-ghost);border-radius:var(--t-border-radius-sm);color:var(--t-text-color-status-secondary);font-size:var(--t-font-size-xs);font-weight:var(--t-font-weight-semibold);line-height:var(--t-element-size-sm);padding:0 var(--t-spacing-1);text-transform:uppercase;vertical-align:middle}.color-mode-switcher-modes-u-bic{border:1px solid var(--t-border-color-default-base);border-radius:var(--t-border-radius-md);container-type:inline-size;display:flex;gap:var(--t-spacing-half);padding:var(--t-spacing-half)}.color-mode-switcher-modes-u-bic input[type=radio]{opacity:0;pointer-events:none;position:absolute}.color-mode-switcher-modes-u-bic label{align-items:center;border-radius:var(--t-border-radius-sm);display:inline-flex;flex-grow:1;justify-content:center;margin:0;min-height:var(--t-element-size-xl);position:relative;-moz-user-select:none;user-select:none}.color-mode-switcher-modes-u-bic label:hover{background:var(--t-fill-color-button-neutral-ghost-hover)}.color-mode-switcher-modes-u-bic label:has(input:focus-visible){outline:auto}.color-mode-switcher-modes-u-bic svg{display:none}@container (width >= 256px){.color-mode-switcher-modes-u-bic svg{display:block}}.color-mode-switcher-modes-u-bic svg{margin-right:var(--t-spacing-half)}.color-mode-switcher-modes-u-bic svg path{stroke:var(--t-icon-color-default-dim)}.color-mode-switcher-modes-u-bic label,.color-mode-switcher-modes-u-bic svg path{transition-duration:.1s;transition-property:color,background-color,stroke;transition-timing-function:linear}.color-mode-switcher-modes-u-bic label:has(input:checked){background-color:var(--t-fill-color-status-info-ghost);color:var(--t-text-color-status-info)}.color-mode-switcher-modes-u-bic label:has(input:checked) svg path{stroke:var(--t-icon-color-status-info-primary)}.drawer-wrap-J0rSL{background-color:var(--t-surface-color-card);bottom:var(--toolbar-navbar-height);display:none;overflow:hidden;position:fixed;top:0;width:100%}.drawer-wrap-J0rSL.is-visible-KTME8{display:block}.drawer-j7f4l{display:flex;flex-direction:column;height:100%;overflow:auto;scrollbar-color:var(--t-fill-color-transparency-dark-030);scrollbar-width:var(--topbar-scrollbar-width)}@media (min-width:600px){.drawer-wrap-J0rSL{border-radius:6px;bottom:var(--t-spacing-2);box-shadow:0 0 0 1px var(--content-wrap-border-color),0 4px 12px 2px rgba(0,0,0,.16);display:block;opacity:0;position:absolute;right:calc(var(--toolbar-drawer-width)*-1);top:calc(var(--topbar-height) + var(--t-spacing-1));transform:translateX(var(--t-spacing-1));transition-delay:0s,0s,.1s;transition-duration:.1s;transition-property:opacity,transform,right;transition-timing-function:ease-in-out;width:var(--toolbar-drawer-width)}.drawer-wrap-J0rSL.is-visible-KTME8{opacity:1;right:calc(var(--toolbar-width) + var(--t-spacing-1) + 1px);transform:translateX(0);transition-delay:0s;transition-property:opacity,transform}}.indicator-dot-MdX3N{background-color:#33adff;background:radial-gradient(#33adff 50%,transparent 0);border-radius:50%;box-shadow:inset 0 0 0 2px #b1bfda;height:12px;pointer-events:none;position:absolute;width:12px;z-index:6}.indicator-dot-MdX3N.is-active-mlX23{box-shadow:inset 0 0 0 2px var(--t-fill-color-neutral-100);height:10px;transform:translateX(-1.5px) translateY(1.5px);width:10px}.toolbar-KHJR5{display:flex;gap:var(--t-spacing-1);height:var(--toolbar-navbar-height);padding:var(--t-spacing-1);padding-top:calc(var(--t-spacing-1) - 1px);width:100vw}.toolbar-button-Ye4h5{align-items:center;-moz-appearance:none;appearance:none;background-color:transparent;border:1px solid transparent;border-radius:var(--t-border-radius-lg);color:var(--t-fill-color-transparency-dark-060);cursor:pointer;display:inline-flex;flex-grow:1;font:inherit;justify-content:center;transition:var(--topbar-slight-transition-background)}.toolbar-button-Ye4h5:hover{background-color:var(--t-fill-color-button-interaction-ghost-hover)}.toolbar-button-Ye4h5.is-current-DZK47,.toolbar-button-Ye4h5:active{background-color:var(--t-fill-color-button-interaction-ghost-active);color:var(--t-fill-color-transparency-dark-080)}.toolbar-button--avatar-5FUik{display:none}.toolbar-button--avatar-5FUik>div{aspect-ratio:1/1;height:auto;margin-left:0;width:var(--t-container-size-md)}.toolbar-button--home-Pthd0{color:#2265f7}@media (min-width:600px){.toolbar-KHJR5{flex-direction:column;height:auto;padding-top:var(--t-spacing-1);width:var(--toolbar-width)}.toolbar-button-Ye4h5{aspect-ratio:1/1}.toolbar-button-Ye4h5:hover{background-color:var(--t-fill-color-transparency-light-040)}.toolbar-button-Ye4h5.is-current-DZK47,.toolbar-button-Ye4h5:active{background-color:var(--t-fill-color-transparency-light-060);border-color:var(--t-fill-color-transparency-light-030);color:var(--t-fill-color-transparency-dark-080)}.toolbar-button--avatar-5FUik{display:inline-flex}.toolbar-button--home-Pthd0{display:none}}
+@charset "UTF-8";
+:root {
+  --topbar-height: 56px;
+  --topbar-slight-transition: 120ms ease-in;
+  --topbar-slight-transition-background: background-color var(--topbar-slight-transition);
+  --topbar-scrollbar-color: var(--t-fill-color-transparency-dark-030) transparent;
+  --topbar-scrollbar-width: thin;
+  --topbar-nav-link-font-size: var(--t-font-size-sm);
+  --topbar-nav-link-font-color: var(--t-text-color-default-headline);
+  --topbar-nav-link-height: var(--t-container-size-md);
+  --topbar-nav-link-background-color: transparent;
+  --topbar-nav-link-padding-x: 12px;
+  --topbar-nav-link-border-color: transparent;
+  --topbar-nav-link-border-radius: 999px;
+  --topbar-nav-link-transition: var(--topbar-slight-transition-background);
+  --topbar-nav-link-background-color-hover: var(--t-fill-color-transparency-light-040);
+  --topbar-nav-link-background-color-active: var(--t-fill-color-transparency-light-060);
+  --topbar-nav-link-border-color-active: var(--t-fill-color-transparency-light-030);
+  --toolbar-width: 64px;
+  --toolbar-inner-width: 48px;
+  --toolbar-drawer-width: 360px;
+  --toolbar-navbar-height: 56px;
+  --content-wrap-border-color: hsla(0, 0%, 0%, 0.08);
+  --content-wrap-shadow-dimensions: 0 -1px 0 0;
+}
+
+@media (min-width: 600px) {
+  :root {
+    --topbar-height: 64px;
+    --content-wrap-shadow-dimensions: 0 0 0 1px;
+  }
+}
+:root[data-color-mode=dark] {
+  --topbar-nav-link-background-color-hover: var(--t-fill-color-transparency-light-020);
+  --topbar-nav-link-background-color-active: var(--t-fill-color-transparency-light-030);
+  --topbar-nav-link-border-color-active: var(--t-fill-color-transparency-light-010);
+  --content-wrap-border-color: hsla(0, 0%, 100%, 0.04);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root[data-color-mode=system] {
+    --topbar-nav-link-background-color-hover: var(--t-fill-color-transparency-light-020);
+    --topbar-nav-link-background-color-active: var(--t-fill-color-transparency-light-030);
+    --topbar-nav-link-border-color-active: var(--t-fill-color-transparency-light-010);
+    --content-wrap-border-color: hsla(0, 0%, 100%, 0.04);
+  }
+}
+/*
+Fix for Safari bug:
+On mobile breakpoints, when the app switcher or user profile menu are open,
+prevent .top-wrap from covering them.
+
+Caused by products overriding .topbar-wrap’s z-index.
+*/
+.page-wrap:has(div[class^=appmenu-layer][style*="display: block"]) .topbar-wrap {
+  z-index: initial !important;
+}
+
+.hide-scrollbar {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+.hide-scrollbar::-webkit-scrollbar {
+  display: none; /* Chrome, Safari, and Opera */
+}
+
+:root[data-app-context=native] {
+  --toolbar-navbar-height: 0;
+}
+
+:root[data-app-context=native] .topbar-wrap {
+  display: none;
+}
+
+:root[data-app-context=native] .toolbar-wrap {
+  overflow: hidden;
+}
+
+@media screen and (min-width: 600px) {
+  :root[data-app-context=native] {
+    --toolbar-width: 0px;
+    --topbar-height: 0px;
+    --toolbar-drawer-width: 48vw;
+  }
+  :root[data-app-context=native] .content-wrap {
+    margin: 0 !important;
+    border-radius: 0;
+  }
+  :root[data-app-context=native] .toolbar-wrap {
+    overflow: visible;
+  }
+}
+.accessibility-toolbar-jgjUG {
+  --topbar-accessibility-toolbar-opacity: 0;
+  --topbar-accessibility-toolbar-translate-y: 4px;
+  --topbar-accessibility-toolbar-pointer-events: none;
+  --topbar-accessibility-toolbar-transition: none;
+  --topbar-accessibility-toolbar-min-width: 100%;
+
+  position: absolute;
+  top: var(--t-spacing-4);
+  left: 50%;
+  transform: translate(-50%, var(--topbar-accessibility-toolbar-translate-y));
+  z-index: 1000;
+
+  padding: var(--t-spacing-2);
+  width: max-content;
+  min-width: var(--topbar-accessibility-toolbar-min-width);
+  max-width: 100vw;
+  display: flex;
+  justify-content: center;
+  gap: var(--t-spacing-2);
+  flex-wrap: wrap;
+
+  border-radius: var(--t-border-radius-md);
+  background: var(--t-surface-color-card);
+  box-shadow: 0 4px 18px 0 var(--t-fill-color-transparency-dark-020);
+  opacity: var(--topbar-accessibility-toolbar-opacity);
+
+  pointer-events: var(--topbar-accessibility-toolbar-pointer-events);
+  transition: var(--topbar-accessibility-toolbar-transition);
+}
+
+.accessibility-toolbar-jgjUG:focus-within {
+  --topbar-accessibility-toolbar-translate-y: 0;
+  --topbar-accessibility-toolbar-opacity: 1;
+  --topbar-accessibility-toolbar-pointer-events: auto;
+  --topbar-accessibility-toolbar-transition: opacity 160ms ease-out, transform 120ms ease-out;
+}
+
+#main-content:focus-visible {
+  outline: none;
+}
+
+@media (min-width: 600px) {
+  .accessibility-toolbar-jgjUG {
+    --topbar-accessibility-toolbar-min-width: 0;
+  }
+  
+  .accessibility-toolbar-jgjUG:has(:only-child) {
+    --topbar-accessibility-toolbar-min-width: 300px;
+  }
+}
+.announcement-pI5tM {
+  font-size: var(--t-font-size-sm);
+  color: hsl(0, 0%, 94%); /* TODO: Replace with static tokens when we get them */
+  background-color: hsla(0, 0%, 0%, 0.5); /* TODO: Replace with static tokens when we get them */
+  display: flex;
+  align-items: center;
+  padding: var(--t-spacing-2);
+  column-gap: var(--t-spacing-3);
+  box-sizing: border-box;
+}
+.announcement--platform-EcUn2 {
+  background-color: hsla(0, 0%, 0%, 0.6); /* TODO: Replace with static tokens when we get them */
+}
+
+.announcement-icon-Ov39- {
+  flex-shrink: 0;
+  flex-grow: 0;
+}
+
+.announcement-content-q2ad6 {
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  column-gap: var(--t-spacing-3);
+}
+
+.announcement-pI5tM a {
+  color: currentColor;
+  text-decoration: underline;
+}
+.announcement-pI5tM a:hover {
+  color: currentColor;
+  text-decoration: none;
+}
+
+@media (min-width: 600px) {
+  .announcement-pI5tM {
+    padding-left: var(--t-spacing-3);
+    padding-right: var(--t-spacing-3);
+  }
+}
+
+.dismiss-wUAoU {
+  background-color: transparent;
+  border-width: 0;
+  cursor: pointer;
+  padding: var(--t-spacing-1);
+  margin: calc(var(--t-spacing-1) * -1);
+  appearance: none;
+}
+
+.unbutton-lEbTR {
+  font-family: inherit;
+  appearance: none;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  display: inline-block;
+  outline: 0;
+  padding: 0;
+}
+
+.button-XMbeQ {
+  color: var(--t-text-color-default-primary);
+  padding-left: var(--t-spacing-1);
+  padding-right: var(--t-spacing-1);
+  height: 100%;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  gap: var(--t-spacing-1);
+  transition: var(--topbar-slight-transition-background);
+  --_svg-display: none;
+}
+.button-XMbeQ svg[data-logo=mono-app-text],
+.button-XMbeQ svg[class^=chevron] {
+  display: var(--_svg-display);
+}
+@media (min-width: 720px) {
+  .button-XMbeQ {
+    --_svg-display: block;
+    padding-left: var(--t-spacing-2);
+    padding-right: var(--t-spacing-2);
+  }
+  .button-XMbeQ svg[data-logo=color-app-icon] {
+    width: 24px;
+    height: 24px;
+  }
+}
+
+.button-accounts-nNh-z {
+  color: var(--t-text-color-default-primary);
+  font-size: var(--t-font-size-sm);
+  font-weight: var(--t-font-weight-medium);
+  margin-left: var(--t-spacing-fourth);
+}
+
+.chevron-RRg9k {
+  border-radius: 100%;
+  padding: var(--t-spacing-fourth);
+  display: block;
+  transition: var(--topbar-slight-transition-background);
+  transition-property: background-color, transform;
+}
+
+.chevron-RRg9k polygon {
+  transform: translateY(0.5px);
+}
+
+.button-XMbeQ:hover .chevron-RRg9k,
+.button-XMbeQ.is-expanded-zD0A0 .chevron-RRg9k {
+  background-color: var(--t-fill-color-transparency-light-050);
+}
+
+.button-XMbeQ.is-expanded-zD0A0 .chevron-RRg9k {
+  transform: rotate(180deg);
+}
+.popup-sJ-Nv {
+  top: calc(var(--topbar-height) - var(--t-spacing-1));
+  left: var(--t-spacing-2);
+  min-width: 180px;
+  max-height: calc(100% - var(--topbar-height) - var(--t-spacing-3));
+}
+
+.popup-root-SeL5u {
+  display: flex;
+  align-self: flex-end;
+}
+
+.popup-nQXYW {
+  background: var(--t-surface-color-card);
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 12px 2px rgba(0, 0, 0, 0.16);
+  border-radius: var(--t-border-radius-lg);
+  position: absolute;
+  overflow: auto;
+  scrollbar-color: var(--topbar-scrollbar-color);
+  scrollbar-width: var(--topbar-scrollbar-width);
+  opacity: 0;
+  visibility: hidden;
+  transition: all 120ms ease-in;
+}
+
+.popup-nQXYW.is-visible-3DAUP {
+  opacity: 1;
+  transition: none;
+  visibility: visible;
+}
+
+.route--8BWe {
+  font-size: var(--topbar-nav-link-font-size);
+  font-family: inherit;
+  color: var(--topbar-nav-link-font-color) !important; /* Override product-specific :hover/:visited color */
+  height: var(--topbar-nav-link-height);
+  border: var(--t-border-width-default) solid var(--topbar-nav-link-border-color);
+  display: inline-flex;
+  align-items: center;
+  text-decoration: none;
+  text-transform: capitalize;
+  vertical-align: middle;
+  white-space: nowrap;
+  margin-right: var(--t-spacing-half); /* off-grid */
+  padding-left: var(--topbar-nav-link-padding-x);
+  padding-right: var(--topbar-nav-link-padding-x);
+  border-radius: var(--topbar-nav-link-border-radius);
+  transition: var(--topbar-nav-link-transition);
+}
+.route--8BWe:hover {
+  background-color: var(--topbar-nav-link-background-color-hover);
+}
+.route--8BWe:active,
+.route--8BWe.is-active-FsU9Y {
+  background-color: var(--topbar-nav-link-background-color-active);
+  border-color: var(--topbar-nav-link-border-color-active);
+}
+
+.apps-routes-separator-Nlm-N {
+  margin-right: var(--t-spacing-2);
+}
+@media (min-width: 720px) {
+  .apps-routes-separator-Nlm-N {
+    margin-right: var(--t-spacing-3);
+  }
+}
+
+.popup-mDNKn {
+  color: var(--t-text-color-default-primary);
+  min-width: 242px;
+  max-width: 320px;
+  margin-top: calc(var(--t-spacing-1) * -1);
+  right: calc(var(--t-spacing-1) + 1px); /* 1px is to account for .product-wrap { padding-right: 1px  } */
+  max-height: calc(100% - var(--topbar-height) - var(--t-spacing-3));
+}
+
+.trigger-wrap-Jd-KR {
+  margin-left: var(--t-spacing-1);
+  position: relative;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.trigger-WgRT5 {
+  font-size: var(--topbar-nav-link-font-size);
+  color: var(--topbar-nav-link-font-color);
+  height: var(--topbar-nav-link-height);
+  background-color: var(--topbar-nav-link-background-color-active);
+  padding: 0 var(--topbar-nav-link-padding-x);
+  border: var(--t-border-width-default) solid var(--topbar-nav-link-border-color-active);
+  border-radius: var(--topbar-nav-link-border-radius);
+  min-width: var(--t-container-size-md);
+  transition: var(--topbar-nav-link-transition);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  outline: 0;
+  appearance: none;
+  cursor: pointer;
+}
+
+.trigger-WgRT5 svg {
+  transition: transform var(--topbar-slight-transition);
+  /* Negative margin ensures button is a circle when orgname isn’t visible */
+  margin-left: calc(var(--t-spacing-1) * -1);
+  margin-right: calc(var(--t-spacing-1) * -1);
+}
+
+.trigger-WgRT5.is-visible-GZC0- svg {
+  transform: rotate(180deg);
+}
+
+.trigger-orgname-TDHCc {
+  max-width: 240px;
+  margin-right: var(--t-spacing-fourth);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.trigger-orgname-TDHCc + svg {
+  color: var(--t-fill-color-transparency-dark-050);
+  /* Correct margin for when orgname is visible */
+  margin-left: 0;
+  margin-right: calc(var(--t-spacing-fourth) * -1);
+}
+
+.avatar-tW-wn {
+  background-color: var(--t-fill-color-transparency-light-020);
+  background-position: center;
+  background-size: cover;
+  border-radius: 50%;
+  height: var(--t-element-size-2xl);
+  width: var(--t-element-size-2xl);
+  margin-left: var(--t-spacing-half);
+}
+
+.appmenu-button-b0UvT {
+  border-width: 0;
+  background-color: transparent;
+  height: 100%;
+  padding-left: var(--t-spacing-2);
+  padding-right: var(--t-spacing-3);
+  appearance: none;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.appmenu-layer-0IQpN {
+  color: var(--t-text-color-default-headline);
+  background-color: var(--t-fill-color-transparency-dark-static-070);
+  display: none;
+  position: fixed;
+  top: 0;
+  bottom: var(--toolbar-navbar-height);
+  left: 0;
+  right: 0;
+  z-index: 100;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.appmenu-container-gackd {
+  background-color: var(--t-surface-color-card);
+  height: calc(100% - env(safe-area-inset-bottom));
+  width: calc(100% - var(--t-spacing-7));
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow: hidden;
+}
+
+.appmenu-scroll-mPSx0 {
+  overflow: auto;
+  scrollbar-color: var(--topbar-scrollbar-color);
+  scrollbar-width: var(--topbar-scrollbar-width);
+}
+
+.appmenu-list-h7clX {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.appmenu-list-a-rGIQN {
+  font-size: var(--t-font-size-sm);
+  color: var(--t-text-color-default-primary);
+  text-decoration: none;
+  min-height: var(--t-container-size-lg);
+  padding: var(--t-spacing-half) var(--t-spacing-2);
+  display: flex;
+  align-items: center;
+}
+.appmenu-list-a--top-RT-2F {
+  min-height: var(--t-container-size-xl);
+  border-bottom: var(--t-border-width-default) solid var(--t-border-color-default-base);
+}
+.appmenu-list-a--bottom-YDeBC {
+  min-height: var(--t-container-size-xl);
+  border-top: var(--t-border-width-default) solid var(--t-border-color-default-base);
+}
+.appmenu-list-a--bottom-YDeBC svg {
+  display: block;
+  margin-right: var(--t-spacing-half);
+  margin-left: calc(var(--t-spacing-fourth) * -1);
+}
+
+.appmenu-close-button-vv9bV {
+  background-color: transparent;
+  padding: 0;
+  border-width: 0;
+  appearance: none;
+  position: absolute;
+  right: var(--t-spacing-2);
+  top: calc(var(--t-spacing-1) + var(--t-spacing-half));
+}
+
+.current-route-wpJgz {
+  font: inherit;
+  color: var(--t-text-color-default-headline);
+  line-height: var(--topbar-height);
+  text-align: center;
+  background-color: transparent;
+  border-width: 0;
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+  justify-content: center;
+  column-gap: var(--t-spacing-half);
+  appearance: none;
+}
+.current-route-wpJgz svg {
+  vertical-align: middle;
+  transition: transform var(--topbar-slight-transition);
+}
+.current-route-wpJgz.is-active-wy8Bg svg {
+  transform: rotate(180deg);
+}
+
+.routes-Nmt1S {
+  background-color: var(--t-surface-color-card);
+  border-radius: var(--t-border-radius-lg);
+  padding: var(--t-spacing-2);
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--t-spacing-half);
+  position: absolute;
+  width: calc(100% - var(--t-spacing-4));
+  max-width: 360px;
+  top: calc(var(--topbar-height) - var(--t-spacing-half));
+  left: 50%;
+  transform: translateX(-50%);
+  max-height: calc(100% - var(--topbar-height) - 1px);
+  box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.05), 0 4px 12px 2px hsla(0, 0%, 0%, 0.16);
+  overflow: auto;
+  scrollbar-color: var(--topbar-scrollbar-color);
+  scrollbar-width: var(--topbar-scrollbar-width);
+}
+
+.route-kkknQ {
+  font-family: inherit;
+  font-size: var(--t-font-size-sm);
+  padding-top: 12px;
+  padding-bottom: 12px;
+  text-align: center;
+  text-decoration: none;
+  text-transform: capitalize;
+  white-space: nowrap;
+  color: var(--t-text-color-default-primary);
+  display: block;
+  position: relative;
+  border-radius: var(--t-border-radius-lg);
+}
+.route-kkknQ:hover {
+  background-color: var(--t-fill-color-button-interaction-outline-dim-hover);
+}
+.route-kkknQ.is-active-wy8Bg {
+  font-weight: var(--t-font-weight-semibold);
+  color: var(--t-text-color-default-headline);
+  background-color: var(--t-fill-color-button-interaction-outline-dim-active);
+}
+
+.profile-button-a2WO2 {
+  background-color: transparent;
+  border-width: 0;
+  padding: var(--t-spacing-2);
+  appearance: none;
+}
+
+.drawer-wrap-J0rSL {
+  width: 100%;
+  background-color: var(--t-surface-color-card);
+
+  display: none;
+  position: fixed;
+  top: 0;
+  bottom: var(--toolbar-navbar-height);
+
+  overflow: hidden;
+}
+.drawer-wrap-J0rSL.is-visible-KTME8 {
+  display: block;
+}
+
+.drawer-j7f4l {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  overflow: auto;
+  scrollbar-color: var(--t-fill-color-transparency-dark-030);
+  scrollbar-width: var(--topbar-scrollbar-width);
+}
+
+@media (min-width: 600px) {
+  .drawer-wrap-J0rSL {
+    width: var(--toolbar-drawer-width);
+    border-radius: 6px; /* TODO: Once a token exists, replace with 6px equivalent 
+    or inset associated with to --t-border-radius-lg */
+    box-shadow: 0 0 0 1px var(--content-wrap-border-color), 0 4px 12px 2px rgba(0, 0, 0, 0.16);
+
+    display: block;
+    position: absolute;
+    bottom: var(--t-spacing-2);
+    right: calc(var(--toolbar-drawer-width) * -1);
+    top: calc(var(--topbar-height) + var(--t-spacing-1));
+
+    opacity: 0;
+    transform: translateX(var(--t-spacing-1));
+    transition-property: opacity, transform, right;
+    transition-duration: 100ms;
+    transition-delay: 0s, 0s, 100ms;
+    transition-timing-function: ease-in-out;
+  }
+  .drawer-wrap-J0rSL.is-visible-KTME8 {
+    right: calc(var(--toolbar-width) + var(--t-spacing-1) + 1px);
+    opacity: 1;
+    transform: translateX(0);
+
+    transition-property: opacity, transform;
+    transition-delay: 0s;
+  }
+}
+
+.indicator-dot-MdX3N {
+  width: 12px;
+  height: 12px;
+  background: radial-gradient(#33adff 50%, transparent 50%);
+  background-color: #33adff;
+  box-shadow: inset 0 0 0 2px #b1bfda;
+  border-radius: 50%;
+  position: absolute;
+  z-index: 6;
+  pointer-events: none;
+}
+
+.indicator-dot-MdX3N.is-active-mlX23 {
+  width: 10px;
+  height: 10px;
+  box-shadow: inset 0 0 0 2px var(--t-fill-color-neutral-100);
+  transform: translateX(-1.5px) translateY(1.5px);
+}
+
+.color-mode-switcher-JpczO {
+  color: var(--t-text-color-default-primary); /* Needed to override .tapestry-react-reset. This is the dumbest thing to have to do */
+  border: 0;
+  padding: 0;
+}
+
+.color-mode-switcher-label-3jPM2 {
+  font-weight: var(--t-font-weight-semibold);
+  display: inline-block;
+  margin-bottom: var(--t-spacing-1);
+}
+
+.color-mode-switcher-label-beta-pwv5t {
+  font-size: var(--t-font-size-xs);
+  font-weight: var(--t-font-weight-semibold);
+  color: var(--t-text-color-status-neutral);
+  background-color: var(--t-fill-color-status-neutral-ghost);
+  border-radius: var(--t-border-radius-sm);
+  padding: 0 var(--t-spacing-1);
+  line-height: var(--t-element-size-sm);
+  vertical-align: middle;
+  text-transform: uppercase;
+}
+
+.color-mode-switcher-modes-u-bic {
+  padding: var(--t-spacing-half);
+  border: var(--t-border-width-default) solid var(--t-border-color-default-base);
+  border-radius: var(--t-border-radius-md);
+  display: flex;
+  gap: var(--t-spacing-half);
+  container-type: inline-size;
+}
+.color-mode-switcher-modes-u-bic input[type=radio] {
+  opacity: 0;
+  position: absolute;
+  pointer-events: none;
+}
+.color-mode-switcher-modes-u-bic label {
+  border-radius: var(--t-border-radius-sm);
+  min-height: var(--t-element-size-xl);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-grow: 1;
+  user-select: none;
+  margin: 0;
+  position: relative;
+}
+.color-mode-switcher-modes-u-bic label:hover {
+  background: var(--t-fill-color-button-neutral-ghost-hover);
+}
+.color-mode-switcher-modes-u-bic label:has(input:focus-visible) {
+  outline: auto;
+}
+.color-mode-switcher-modes-u-bic svg {
+  display: none;
+  margin-right: var(--t-spacing-half);
+}
+@container (width >= 256px) {
+  .color-mode-switcher-modes-u-bic svg {
+    display: block;
+  }
+}
+.color-mode-switcher-modes-u-bic svg path {
+  stroke: var(--t-icon-color-default-dim);
+}
+.color-mode-switcher-modes-u-bic label,
+.color-mode-switcher-modes-u-bic svg path {
+  transition-property: color, background-color, stroke;
+  transition-duration: 0.1s;
+  transition-timing-function: linear;
+}
+.color-mode-switcher-modes-u-bic label:has(input:checked) {
+  color: var(--t-text-color-status-info);
+  background-color: var(--t-fill-color-status-info-ghost);
+}
+.color-mode-switcher-modes-u-bic label:has(input:checked) svg path {
+  stroke: var(--t-icon-color-status-info-primary);
+}
+.toolbar-KHJR5 {
+  display: flex;
+  width: 100vw;
+  height: var(--toolbar-navbar-height);
+  padding: var(--t-spacing-1);
+  padding-top: calc(var(--t-spacing-1) - 1px);
+  gap: var(--t-spacing-1);
+}
+
+.toolbar-button-Ye4h5 {
+  font: inherit;
+  color: var(--t-fill-color-transparency-dark-060);
+  background-color: transparent;
+  border: var(--t-border-width-default) solid transparent;
+  border-radius: var(--t-border-radius-lg);
+  flex-grow: 1;
+  transition: var(--topbar-slight-transition-background);
+  cursor: pointer;
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.toolbar-button-Ye4h5:hover {
+  background-color: var(--t-fill-color-button-interaction-ghost-hover);
+}
+.toolbar-button-Ye4h5:active,
+.toolbar-button-Ye4h5.is-current-DZK47 {
+  color: var(--t-fill-color-transparency-dark-080);
+  background-color: var(--t-fill-color-button-interaction-ghost-active);
+}
+
+.toolbar-button--avatar-5FUik {
+  display: none;
+}
+.toolbar-button--avatar-5FUik > div {
+  margin-left: 0;
+  width: var(--t-container-size-md);
+  height: auto;
+  aspect-ratio: 1 / 1;
+}
+
+.toolbar-button--home-Pthd0 {
+  color: hsl(221, 93%, 55%);
+}
+
+@media (min-width: 600px) {
+  .toolbar-KHJR5 {
+    width: var(--toolbar-width);
+    height: auto;
+    padding-top: var(--t-spacing-1);
+    flex-direction: column;
+  }
+
+  .toolbar-button-Ye4h5 {
+    aspect-ratio: 1 / 1;
+  }
+  .toolbar-button-Ye4h5:hover {
+    background-color: var(--t-fill-color-transparency-light-040);
+  }
+  .toolbar-button-Ye4h5:active,
+  .toolbar-button-Ye4h5.is-current-DZK47 {
+    color: var(--t-fill-color-transparency-dark-080);
+    background-color: var(--t-fill-color-transparency-light-060);
+    border-color: var(--t-fill-color-transparency-light-030);
+  }
+
+  .toolbar-button--avatar-5FUik {
+    display: inline-flex;
+  }
+
+  .toolbar-button--home-Pthd0 {
+    display: none;
+  }
+}
+
 /*# sourceMappingURL=topbar.css.map */