.tabs {
  display: flex;
  flex-direction: column;
  row-gap: var(--size-2);
}

.tabs__list {
  background-color: var(--zinc-300);
  block-size: var(--size-9);
  border-radius: var(--rounded-md);
  color: var(--color-text-subtle);
  column-gap: var(--size-2);
  display: inline-flex;
  padding: var(--size-1);

  @media (prefers-color-scheme: dark) {
    background-color: var(--zinc-500);
  }
}

.tabs__button {
  --btn-background: transparent;
  --btn-border-color: transparent;
  --btn-box-shadow: none;
  --btn-hover-color: var(--color-border-light);
  --btn-inline-size: var(--size-full);

  &:is([aria-selected="true"], [aria-current="page"]) {
    --btn-background: var(--color-bg);
    --btn-box-shadow: var(--shadow-sm);
    --btn-hover-color: var(--color-bg);
  }

  @media (prefers-color-scheme: dark) {
    --btn-hover-color: var(--color-border-dark);
  }
}