/*
 * Tabs
 *
 * Developed by: Rhyll Neri
 */

.tabs {
  width: 100%;
}

.tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0;
  margin: 0 0 var(--space-6);
  list-style: none;
  border-bottom: 1px solid var(--color-border);
}

.tabs__tab {
  padding: var(--space-3) var(--space-5);
  background: transparent;
  color: var(--color-text-muted);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-14);
  letter-spacing: 0.02em;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color var(--dur-200), border-color var(--dur-200);
}

.tabs__tab:hover { color: var(--color-ink); }

.tabs__tab.is-active {
  color: var(--color-primary);
  border-bottom-color: var(--color-accent);
}

.tabs__panel {
  display: none;
  animation: ardent-fade-in var(--dur-300) var(--ease-out);
}

.tabs__panel.is-active { display: block; }

@keyframes ardent-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}