.tabs {
  display: flex;
  border-bottom: 1px solid var(--color-border-primary);
  overflow-x: auto;
  overflow-y: hidden;

  /* Hide scrollbar */
  scrollbar-width: none;  /* Firefox */
  -ms-overflow-style: none;  /* IE and Edge */
  &::-webkit-scrollbar {
    display: none;  /* Chrome, Safari, Opera */
  }

  .tab-item {
    flex-shrink: 0;
    white-space: nowrap;
    padding: var(--spacing-lg) var(--spacing-3xl);
    font-size: var(--font-size-md);
    line-height: var(--line-height-text-md);
    color: var(--color-text-quaternary);
    cursor: pointer;

    &:is(button) {
      height: 100%;
      background: transparent;
      border: 0;
      border-radius: 0;
      box-shadow: none;
      font-family: inherit;
      font-weight: var(--weight-regular);
      gap: var(--spacing-xs);

      .tab-dropdown-caret {
        font-size: 8px;
      }
    }

    &.active {
      color: var(--color-text-primary);
      border-bottom: 2px solid var(--color-fg-tertiary);
    }
  }

  /* A sub nav is the same strip a size down, so the tab it has selected is underlined like the one
     above it rather than marked with a fill of its own. */
  &.secondary {
    gap: var(--spacing-xs);
    margin-top: var(--spacing-lg);

    .tab-item {
      padding: var(--spacing-sm) var(--spacing-lg);
      font-size: var(--font-size-sm);
    }
  }
}