/**
 * Webtron Docs — Parent Tabs (Stripe-style)
 *
 * Horizontal tab row for root-level doc sections. Arrow buttons
 * for overflow navigation (no native scroll). Active tab has
 * underline indicator.
 *
 * @package WebtronDocs
 * @since   3.0.0
 */

/* ==========================================================================
   Tab container
   ========================================================================== */

.docs-parent-tabs {
  position: relative;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 0;
  overflow: hidden;
  background: #1e293b;
  width: 100%;
}

/* ==========================================================================
   Inner wrapper (React renders this inside #docs-parent-tabs-root). Carries the
   has-overflow-left / has-overflow-right classes that drive the arrows + edge fades.
   ========================================================================== */

.docs-tabs-inner {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

/* Edge-fade gradients — a clear "there's more to scroll" cue. Sit over the track edges, below the
   arrow buttons, and only appear on the side that actually overflows (classes set by the JS
   overflow detection). pointer-events:none so they never block tab clicks. */
.docs-tabs-inner::before,
.docs-tabs-inner::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 1px; /* above the container border */
  width: 56px;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-normal) ease;
}

.docs-tabs-inner::before {
  left: 0;
  background: linear-gradient(to right, #1e293b, rgba(30, 41, 59, 0));
}

.docs-tabs-inner::after {
  right: 0;
  background: linear-gradient(to left, #1e293b, rgba(30, 41, 59, 0));
}

.docs-tabs-inner.has-overflow-left::before {
  opacity: 1;
}

.docs-tabs-inner.has-overflow-right::after {
  opacity: 1;
}

/* ==========================================================================
   Arrow navigation buttons — solid circular controls (clearer affordance than
   the old flat chevrons that blended into the dark bar).
   ========================================================================== */

.docs-tabs-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3; /* above the edge fades */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  transition: background var(--duration-fast) ease,
              border-color var(--duration-fast) ease,
              transform var(--duration-fast) ease;
  padding: 0;
}

.docs-tabs-arrow--left {
  left: 8px;
}

.docs-tabs-arrow--right {
  right: 8px;
}

.docs-tabs-arrow:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.35);
}

.docs-tabs-arrow:active {
  transform: translateY(-50%) scale(0.92);
}

.docs-tabs-arrow:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(91, 157, 229, 0.6);
}

.docs-tabs-arrow[hidden] {
  display: none;
}

/* ==========================================================================
   Scrollable track
   ========================================================================== */

.docs-tabs-track {
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow: hidden;
  scroll-behavior: smooth;
  flex: 1;
  max-width: var(--layout-max);
  margin-inline: auto;
  padding: 0 var(--layout-padding);
}

/* Reserve room for the circular arrow buttons when they're visible. (Classes live on
   .docs-tabs-inner — the React wrapper — not .docs-parent-tabs.) */
.docs-tabs-inner.has-overflow-left .docs-tabs-track {
  padding-left: 46px;
}
.docs-tabs-inner.has-overflow-right .docs-tabs-track {
  padding-right: 46px;
}

/* ==========================================================================
   Individual tab
   ========================================================================== */

.docs-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border: none;
  background: none;
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--docs-font-sans);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  border-radius: 0;
  transition: color var(--duration-fast) ease;
  text-decoration: none;
  line-height: 1.4;
  flex-shrink: 0;
}

.docs-tab:hover {
  color: #fff;
}

.docs-tab i {
  font-size: 14px;
  opacity: 0.85;
}

/* ── Active tab ────────────────────────────── */

.docs-tab.is-active {
  color: #5b9de5;
  font-weight: 600;
}

.docs-tab.is-active::after {
  content: '';
  position: absolute;
  bottom: -1px; /* sits on top of the container border */
  left: var(--space-4);
  right: var(--space-4);
  height: 2px;
  background: #5b9de5;
  border-radius: 1px 1px 0 0;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
  .docs-tab {
    padding: var(--space-3) var(--space-4);
    font-size: 12px;
  }

  .docs-tabs-arrow {
    width: 28px;
    height: 28px;
  }

  .docs-tabs-inner::before,
  .docs-tabs-inner::after {
    width: 40px;
  }
}

/* ==========================================================================
   Reduced motion — drop the edge-fade transition + arrow press animation.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .docs-tabs-inner::before,
  .docs-tabs-inner::after,
  .docs-tabs-arrow {
    transition: none;
  }

  .docs-tabs-arrow:active {
    transform: translateY(-50%);
  }
}