/*
 * GALAPPXY — Tabs
 * .gx-tabs
 */

.gx-tabs {
  display: flex;
  border-bottom: 1px solid var(--gx-border-color);
  gap: 0;
}

.gx-tabs__item {
  padding: var(--gx-sp-3) var(--gx-sp-4);
  font-size: var(--gx-text-sm);
  font-weight: var(--gx-weight-medium);
  color: var(--gx-text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all var(--gx-duration-base) var(--gx-ease-default);
  white-space: nowrap;
  margin-bottom: -1px;
}

.gx-tabs__item:hover {
  color: var(--gx-text-primary);
}

.gx-tabs__item.is-active {
  color: var(--gx-primary);
  border-bottom-color: var(--gx-primary);
}

/* Pill tabs */
.gx-tabs--pills {
  border-bottom: none;
  gap: var(--gx-sp-1);
  background: var(--gx-bg-surface-alt);
  border-radius: var(--gx-radius-md);
  padding: 3px;
}

.gx-tabs--pills .gx-tabs__item {
  border-bottom: none;
  border-radius: var(--gx-radius-sm);
  padding: var(--gx-sp-2) var(--gx-sp-3);
  margin-bottom: 0;
}

.gx-tabs--pills .gx-tabs__item.is-active {
  background: var(--gx-bg-surface);
  color: var(--gx-text-primary);
  box-shadow: var(--gx-shadow-xs);
}

/* Tab content */
.gx-tab-content {
  display: none;
}

.gx-tab-content.is-active {
  display: block;
}