/* Tools navigation groups (static/js/nav-groups.js). */

/* backdrop-filter makes .top-chrome the containing block of position:fixed children,
   which misplaced and clipped the drop-down menus. The bar is ~opaque anyway. */
body.page-tools .top-chrome {-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

.top-chrome .nav .nav-group {position:relative;display:flex;align-items:stretch;flex:0 0 auto}
.top-chrome .nav .nav-group__trigger {cursor:pointer}
.top-chrome .nav .nav-group__trigger::after {display:none!important}
.nav-group__chev {display:inline-block;width:5px;height:5px;margin:0 0 2px 5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);opacity:.75;vertical-align:middle;transition:transform .15s}
.nav-group.is-open .nav-group__chev {transform:rotate(225deg);margin-bottom:-1px}
.top-chrome .nav .nav-group__trigger.is-current,.top-chrome .nav .nav-group.is-open>.nav-group__trigger {color:#fff!important}
.top-chrome .nav .nav-group__trigger.is-current::before,.top-chrome .nav .nav-group.is-open>.nav-group__trigger::before {background:var(--sm-cyan,#55d9ff)!important;filter:drop-shadow(0 0 8px rgba(85,217,255,.52))!important}
.top-chrome .nav .nav-group__trigger.is-current {box-shadow:inset 0 -2px 0 var(--cut-cyan,#55d9ff)!important}

.top-chrome .nav .nav-group__menu {position:fixed;z-index:1400;display:grid;gap:2px;padding:6px;background:#0b1620;border:1px solid #2a4757;border-top:2px solid var(--cut-cyan,#55d9ff);border-radius:8px;box-shadow:0 18px 50px #000c}
.top-chrome .nav .nav-group__menu[hidden] {display:none!important}
.top-chrome .nav .nav-group__menu>button[data-tab] {display:grid!important;grid-template-columns:22px minmax(0,1fr);grid-template-rows:auto auto;align-items:center;column-gap:12px;row-gap:2px;min-width:0!important;min-height:0!important;height:auto!important;max-height:none!important;width:100%;padding:10px 12px!important;border-radius:6px!important;text-align:left!important;font:800 13px/1.3 Mulish,sans-serif!important;letter-spacing:0!important;text-transform:none!important;color:#e9f8ff!important;white-space:normal!important}
.top-chrome .nav .nav-group__menu>button[data-tab]::before {position:static!important;grid-column:1;grid-row:1/3;margin:0!important;width:20px!important;height:20px!important}
.top-chrome .nav .nav-group__menu>button[data-tab]::after {content:attr(data-hint)!important;display:block!important;position:static!important;grid-column:2;grid-row:2;width:auto!important;height:auto!important;background:none!important;box-shadow:none!important;color:#9bb4c1;font:500 11px/1.35 Mulish,sans-serif;letter-spacing:0;text-transform:none}
.top-chrome .nav .nav-group__menu>button[data-tab]:hover,.top-chrome .nav .nav-group__menu>button[data-tab]:focus-visible {background:#12303d!important}
.top-chrome .nav .nav-group__menu>button[data-tab].active {background:#123343!important;box-shadow:inset 3px 0 var(--cut-cyan,#55d9ff)!important}
.top-chrome .nav .nav-group__menu>button[data-tab].active::before {background:var(--sm-cyan,#55d9ff)!important}
.top-chrome .nav .nav-group__menu>button[hidden] {display:none!important}
.top-chrome .nav button[data-tab="loop"] {--tool-icon:url('/static/img/tool-icons/loop.svg')}
.top-chrome .nav button[data-tab="doctor"] {--tool-icon:url('/static/img/tool-icons/profile-rating.svg')}
.top-chrome .nav button[data-tab="design-ai"] {--tool-icon:url('/static/img/tool-icons/design-selection.svg')}
.top-chrome .nav button[data-tab="workshop"] {--tool-icon:url('/static/img/tool-icons/workshop.svg')}