@use '../tokens' as t;

.tabs {
  display: flex;
  gap: t.space(4);
}

.orientation-horizontal {
  flex-direction: column;
}

.orientation-vertical {
  flex-direction: row;

  .list {
    flex-direction: column;
    border-block-end: 0;
    border-inline-end: 1px solid t.role('line');
  }

  // On the list's inline-END edge, beside its border. A shadow's x offset is physical, so RTL —
  // where that edge is the left one — gets the mirrored sign, as `Switch.module.scss` does.
  .tab[aria-selected='true'] {
    box-shadow: inset calc(-1 * #{t.stroke(thick)}) 0 0 0 t.role('accent');
  }
}

[dir='rtl'] .orientation-vertical .tab[aria-selected='true'] {
  box-shadow: inset t.stroke(thick) 0 0 0 t.role('accent');
}

.list {
  @include t.custom-scrollbar;
  display: flex;
  gap: t.space(1);
  border-block-end: 1px solid t.role('line');
  overflow-x: auto;
}

.tab {
  @include t.focus-ring('accent', t.stroke(thick), calc(-1 * #{t.stroke(thick)}));
  @include t.transition(color, box-shadow, background);
  padding-block: t.space(2);
  padding-inline: t.space(3);
  border-start-start-radius: t.radius(sm);
  border-start-end-radius: t.radius(sm);
  color: t.role('fg-muted');
  font-size: t.text(sm);
  font-weight: t.weight(medium);
  white-space: nowrap;
  cursor: pointer;

  &:hover:not(:disabled) {
    color: t.role('fg-strong');
    background: t.role('bg-soft');
  }

  @include t.disabled(0.5);

  &[aria-selected='true'] {
    color: t.role('accent');
    // Inset shadow instead of a border, so the tab does not shift on select.
    box-shadow: inset 0 calc(-1 * #{t.stroke(thick)}) 0 0 t.role('accent');
  }
}

.panel {
  min-inline-size: 0;

  &:focus-visible {
    outline: t.stroke(thick) solid t.role('accent');
    outline-offset: t.stroke(thick);
  }
}