/* Base tabs component */
.tabs {
  @apply flex gap-2;

  /* Orientation styles */
  &[data-orientation="horizontal"] {
    @apply flex-col;
  }

  &[data-orientation="vertical"] {
    @apply flex-row;
  }
}

/* Tab list container */
.tabs__list-container {
  @apply relative;
}

/* Tab list */
.tabs__list {
  @apply inline-flex bg-default p-1;

  border-radius: calc(var(--radius-2xl) + 0.25rem);

  /* Horizontal orientation */
  &[data-orientation="horizontal"] {
    @apply w-full flex-row;
  }

  /* Vertical orientation */
  &[data-orientation="vertical"] {
    @apply flex-col gap-1;

    .tabs__tab {
      @apply min-w-20;
    }
  }
}

/* Individual tab */
.tabs__tab {
  position: relative;
  z-index: 1;
  cursor: var(--cursor-interactive);

  @apply flex h-8 w-full items-center justify-center rounded-3xl px-4 text-center text-sm font-medium text-muted outline-none no-highlight;

  /**
   * Transitions
   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
   */
  transition:
    color 150ms var(--ease-smooth),
    background-color 150ms var(--ease-smooth),
    box-shadow 150ms var(--ease-out),
    opacity 150ms var(--ease-smooth);
  @apply motion-reduce:transition-none;

  /* Selected state */
  &[data-selected="true"] {
    @apply text-segment-foreground;
  }

  /* Hide separator when this tab is selected */
  &[data-selected="true"] .tabs__separator {
    opacity: 0;
  }

  /* Hide separator when previous sibling is selected */
  &[data-selected="true"] + .tabs__tab .tabs__separator {
    opacity: 0;
  }

  /* Disabled state */
  &:disabled,
  &[data-disabled="true"],
  &[aria-disabled="true"] {
    @apply status-disabled;
  }

  /* Hover states - both approaches for compatibility */
  @media (hover: hover) {
    &:not([data-selected="true"]):not([data-disabled="true"]):hover,
    &[data-hovered="true"]:not([data-selected="true"]):not([data-disabled="true"]) {
      @apply opacity-70;
    }
  }

  /* Focus states - comprehensive fallback */
  &:focus-visible:not(:focus),
  &[data-focus-visible="true"] {
    @apply status-focused;
  }
}

/* Tab separator */
.tabs__separator {
  @apply bg-muted/25;

  border-radius: 4px;
  position: absolute;
  pointer-events: none;

  /**
   * Transitions
   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
   */
  transition: opacity 150ms var(--ease-smooth);
  @apply motion-reduce:transition-none;

  /* Horizontal tabs - vertical separator */
  .tabs__list[data-orientation="horizontal"] & {
    left: 0;
    top: 25%;
    width: 1px;
    height: 50%;
  }

  /* Vertical tabs - horizontal separator */
  .tabs__list[data-orientation="vertical"] & {
    top: 0;
    left: 5%;
    width: 90%;
    height: 1px;
  }
}

/* Tab panel */
.tabs__panel {
  @apply w-full p-2 outline-none;

  /* Entering animations */
  &[data-entering="true"] {
  }

  /* Exiting animations */
  &[data-exiting="true"] {
    @apply absolute top-0 left-0 w-full;
  }

  /* Orientation spacing */
  &[data-orientation="horizontal"] {
    @apply mt-4;
  }

  &[data-orientation="vertical"] {
    @apply ml-4;
  }
}

/* Tab indicator - React Aria's SelectionIndicator */
.tabs__indicator {
  box-shadow: var(--shadow-surface);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  border-radius: var(--radius-3xl);
  width: 100%;
  height: 100%;

  @apply bg-segment;

  /**
   * Transitions
   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
   */
  transition-duration: 250ms;
  transition-property: translate, width, height;
  transition-timing-function: var(--ease-out-fluid);
  @apply motion-reduce:transition-none;
}

/* ==========================================================================
   Secondary Variant
   ========================================================================== */

.tabs--secondary {
  /* Tab list - remove background, add bottom/left border */
  .tabs__list {
    @apply bg-transparent p-0;

    border-radius: 0;

    /* Horizontal orientation - bottom border, scrollable */
    &[data-orientation="horizontal"] {
      @apply border-b border-border;

      max-width: 100%;
      overflow-x: auto;
      overflow-y: clip;
      scrollbar-width: none;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    /* Vertical orientation - left border */
    &[data-orientation="vertical"] {
      @apply border-l border-border;
    }
  }

  /* Tab - adjust for secondary variant */
  .tabs__tab {
    @apply rounded-none;

    /* Selected state - use text-foreground */
    &[data-selected="true"] {
      @apply text-foreground;
    }
  }

  /* Hide separators in secondary variant */
  .tabs__separator {
    display: none;
  }

  /* Tab indicator - line style */
  .tabs__indicator {
    @apply bg-accent;

    box-shadow: none;
    border-radius: 0;
  }

  /* Horizontal orientation - bottom line indicator */
  &[data-orientation="horizontal"] .tabs__indicator {
    top: auto;
    bottom: 0;
    height: 2px;
  }

  /* Vertical orientation - left line indicator */
  &[data-orientation="vertical"] .tabs__indicator {
    left: 0;
    top: 0;
    width: 2px;
    height: 100%;
  }
}