/* One folder-tab component for section links and entity panels. */
.folder-tabs.folder-tabs {
  --tab-fill:#e8e7e3;
  --tab-edge:#cecdc7;
  --tab-ink:#45443f;
  --tab-hover:#deddd7;
  --tab-active:var(--brand-iron,#d97757);
  display:flex;align-items:flex-end;flex-wrap:nowrap;gap:2px;
  width:100%;max-width:100%;min-width:0;box-sizing:border-box;
  padding:4px 1px 0;margin:20px 0 20px;
  border:0;border-bottom:1px solid var(--tab-active);border-radius:0;
  background:transparent;box-shadow:none;
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  scrollbar-width:thin;scrollbar-color:var(--tab-edge) transparent;
  -webkit-overflow-scrolling:touch;scroll-padding-inline:8px;
}
[data-theme=dark] .folder-tabs {
  --tab-fill:#383835;--tab-edge:#55554f;--tab-ink:#e9e8e3;--tab-hover:#454540;
}
.folder-tabs.folder-tabs > :is(button,a) {
  position:relative;isolation:isolate;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  box-sizing:border-box;min-width:0;width:auto;height:42px;min-height:42px;
  padding:0 22px;margin:0;border:0;border-radius:0;
  background:transparent;color:var(--tab-ink);box-shadow:none;outline:none;
  font:500 13px/1.25 var(--theme-font-sans,Arial,sans-serif);
  letter-spacing:normal;text-decoration:none;white-space:nowrap;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.folder-tabs.folder-tabs > :is(button,a)::before,
.folder-tabs.folder-tabs > :is(button,a)::after {
  content:"";position:absolute;z-index:-1;inset-block:0;
  width:calc(50% + 1px);box-sizing:border-box;
  background:var(--tab-fill);border:1px solid var(--tab-edge);border-bottom:0;
  transform-origin:bottom center;pointer-events:none;
  transition:background-color .12s ease,border-color .12s ease;
}
.folder-tabs.folder-tabs > :is(button,a)::before {
  left:0;border-right:0;border-radius:8px 0 0 0;transform:skewX(-16deg);
}
.folder-tabs.folder-tabs > :is(button,a)::after {
  right:0;border-left:0;border-radius:0 8px 0 0;transform:skewX(16deg);
}
.folder-tabs.folder-tabs > :is(button,a):first-child::before {transform:none}
.folder-tabs.folder-tabs > :is(button,a):first-child {padding-left:16px}
.folder-tabs.folder-tabs > :is(button,a):hover {--tab-fill:var(--tab-hover);color:var(--tab-ink);background:transparent}
.folder-tabs.folder-tabs > :is(button,a):is([aria-selected=true],[aria-current=page],.primary,.active) {
  --tab-fill:var(--tab-active);--tab-edge:var(--tab-active);
  color:#262521;background:transparent;box-shadow:none;font-weight:600;outline:none;
}
.folder-tab-content {display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;min-width:0}
.folder-tabs .folder-tab-content > svg {width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.folder-tabs .badge {margin:0 0 0 3px;padding:2px 5px;min-width:18px;font-size:10px;line-height:1.2;background:color-mix(in srgb,currentColor 12%,transparent);color:inherit;border:0}
.folder-tabs.folder-tabs > :is(button,a):focus-visible .folder-tab-content {outline:2px solid currentColor;outline-offset:5px;border-radius:2px}
@media(max-width:760px) {
  .folder-tabs.folder-tabs {margin-block:16px;gap:2px}
  .folder-tabs.folder-tabs > :is(button,a) {height:44px;min-height:44px;flex:0 0 auto;padding-inline:20px;font-size:13px;min-width:0}
  .folder-tabs.folder-tabs > :is(button,a):first-child {padding-left:14px}
}
@media(prefers-reduced-motion:reduce) {.folder-tabs.folder-tabs > :is(button,a)::before,.folder-tabs.folder-tabs > :is(button,a)::after{transition:none}}
@media print {.folder-tabs.folder-tabs {display:none}}
