:root {
  @include use-responsive-sizing(--tabs-font-size, (xs: 1.8rem, xl: 2.2rem));
  @include use-responsive-sizing(--tabs-gap, (xs: 2.4rem, xl: 4rem));
}

.tabs__tabs {
  display: flex;
  gap: var(--tabs-gap);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;

  @include use-responsive-sizing(margin-block-end, (xs: 2rem, xl: 4rem));
}

.tabs__tab {
  color: var(--tabs-color, var(--color-midnight));
  display: block;
  font-size: var(--tabs-font-size);
  scroll-snap-align: start;
  white-space: nowrap;
}

.tabs__tab-link {
  --underline-height: var(--tabs-underline-height, 0.1em);
  --underline-offset: var(--tabs-underline-offset, 0.5em);
  --underline-color: var(--tabs-underline-color, currentColor);
  --underline-focus-color: transparent;

  display: block;
  line-height: 1;
  padding-block-end: calc(var(--underline-height) + var(--underline-offset));
  user-select: none;

  &:is([aria-selected]) {
    --underline-color: var(--tabs-color);
    --underline-color--enter: transparent;

    font-weight: var(--font-weight-bold);
    pointer-events: none;
  }
}

.tabs__panel {
  &[aria-hidden='true'] {
    display: none;
  }
}