/* Public Tabs Component */
.tabs {
  display: flex;
  overflow-x: auto;
  border-bottom: 1px solid var(--color-neutral-200);
  margin-bottom: var(--space-6);
  gap: var(--space-4);
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.tabs::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Opera */
}

.tab {
  padding: var(--space-3) var(--space-4);
  color: var(--color-neutral-500);
  font-size: var(--text-base);
  font-weight: 500;
  text-decoration: none;
  appearance: none;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  box-shadow: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.tab:hover {
  color: var(--color-neutral-900);
  border-bottom-color: var(--color-neutral-200);
}

.tab.active {
  color: var(--color-secondary-main);
  border-bottom-color: var(--color-secondary-main);
}