:root{
  --sfl-accent:#c7a86d;
  --sfl-dark:#181818;
  --sfl-muted:#787878;
  --sfl-border:#e8e8e8;
  --sfl-bg:#fff;
  --sfl-bg-alt:#f7f7f7;
  --s:260ms;
  --c:cubic-bezier(.4,0,.2,1);
}

/* tabs wrapper with arrows + fade; scoped */
.sflst .sflst__tabs-wrap{
  position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;margin:10px 0 14px
}
.sflst .sflst__tabs{
  display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:6px 4px;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%);
}
.sflst .sflst__tabs::-webkit-scrollbar{display:none}

/* pills */
.sflst .sflst__tab{
  appearance:none;border:1px solid var(--sfl-border);background:var(--sfl-bg);color:#222;
  border-radius:999px;padding:10px 14px;cursor:pointer;white-space:nowrap;font:700 13px/1 system-ui;
  transition:all var(--s) var(--c)
}
.sflst .sflst__tab:hover{border-color:var(--sfl-accent)}
.sflst .sflst__tab.is-active{background:var(--sfl-dark);color:#fff;border-color:var(--sfl-dark)}
.sflst .sflst__tab .sflst__tab-label{display:inline}
.sflst .sflst__tab-count{
  margin-left:8px;min-width:20px;height:20px;border-radius:999px;display:inline-grid;place-items:center;
  background:#111;color:#fff;font:800 11px/1 system-ui;padding:0 6px
}