/* <x-tabs>: a row of tab buttons, same look as the tabs of x-sidebar. */
x-tabs {
  display: flex;
  gap: 4px;
  box-shadow: inset 0 -3px 0 var(--tab-base);
  overflow-x: auto;
  scrollbar-width: none;

  &::-webkit-scrollbar { display: none; }

  & button {
    height: 46px;
    padding: 0 12px;
    border: 0;
    background: none;
    color: var(--fg-2);
    font-weight: 500;
    white-space: nowrap;
    position: relative;
    flex: none;
    transition: color 0.25s var(--ease);

    &::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; transition: background 0.3s var(--ease); }
    &:hover { color: var(--fg); }
    &:hover::after { background: var(--tab-hover); }
    &.active { color: var(--fg); font-weight: 600; }
    &.active::after { background: var(--accent); }
  }
}