hikari-components 0.2.0

// Use theme variables with namespace to avoid conflicts
@use 'variables' as vars;
@use 'mixins' as mix;

// ============================================
// Hikari // Hikari // Hikari // Hikari // Hikari Tabs Component -  Styling Component Component Component Component

// ============================================
// Base Tabs Styles
// ============================================

.hi-tabs {
  // Layout
  display: flex;
  flex-direction: column;

  // Appearance
  background: transparent;

  // Transitions
  // DISABLED - migrated to JS animation

  // transition: all vars.$hikari-duration-normal vars.$hikari-ease-smooth;
}

// ============================================
// Tabs Header (Navigation)
// ============================================

.hi-tabs-header {
  // Layout
  display: flex;
  align-items: center;
  position: relative;

  // Spacing
  margin: 0;
  padding: 0;

  // Border
  border-bottom: 1px solid var(--hi-color-border);

  // Position for indicator
  position: relative;

  // Scrollable support
  overflow-x: auto;
  overflow-y: hidden;

  // Hide native scrollbar (using custom scrollbar component)
  @include mix.scrollbar-hidden;
}

// ============================================
// Tabs Nav (List)
// ============================================

.hi-tabs-nav {
  // Layout
  display: flex;
  align-items: center;
  gap: 0.5rem;

  // Reset
  list-style: none;
  margin: 0;
  padding: 0.5rem;

  // Min width for scroll support
  min-width: max-content;
}

// ============================================
// Tab Item
// ============================================

.hi-tab {
  // Layout
  display: flex;
  align-items: center;
  gap: 0.5rem;

  // Spacing
  padding: 0.625rem 1rem;
  margin: 0;

  // Typography
  font-family: vars.$hikari-font-family-sans;
  font-size: vars.$hikari-font-size-sm;
  font-weight: 500;
  line-height: 1.5;
  color: var(--hi-color-text-secondary);
  text-decoration: none;
  white-space: nowrap;

  // Appearance
  background: transparent;
  border: none;
  border-radius: vars.$hikari-radius-fui-sm;

  // Cursor
  cursor: pointer;
  user-select: none;

  // Transitions
  // DISABLED - migrated to JS animation

  // transition: all vars.$hikari-duration-fast vars.$hikari-ease-smooth;

  // Position
  position: relative;

  // Icon
  .hi-tabs-tab-icon {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    // DISABLED - migrated to JS animation

    // transition: all vars.$hikari-duration-fast vars.$hikari-ease-smooth;

    svg {
      width: 100%;
      height: 100%;
    }
  }

  // Label
  .hi-tabs-tab-label {
    flex: 1;
  }

  // Close button
  .hi-tab-close {
    flex-shrink: 0;
    width: 0.875rem;
    height: 0.875rem;
    margin-left: 0.25rem;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--hi-color-text-secondary);
    cursor: pointer;
    border-radius: vars.$hikari-radius-fui-sm;
    opacity: 0;
    // DISABLED - migrated to JS animation

    // transition: all vars.$hikari-duration-fast vars.$hikari-ease-smooth;

    svg {
      width: 100%;
      height: 100%;
    }

    &:hover {
      color: var(--hi-color-danger);
      background: rgba(255, 76, 0, 0.2);
      box-shadow: 0 0 8px rgba(255, 76, 0, 0.3);
    }
  }

  // Hover state
  &:hover {
    color: var(--hi-color-text-primary);
    background: var(--hi-primary);

    .hi-tabs-tab-icon {
      color: var(--hi-color-primary);
      filter: drop-shadow(0 0 4px var(--hi-primary));
    }

    .hi-tab-close {
      opacity: 1;
    }
  }

  // Active state
  &.hi-tab-active {
    color: var(--hi-color-text-primary);
    background: var(--hi-primary);
    box-shadow:
      0 0 12px var(--hi-primary),
      inset 0 0 8px var(--hi-primary);

    .hi-tabs-tab-icon {
      color: var(--hi-color-primary);
      filter: drop-shadow(0 0 6px var(--hi-primary));
    }

    .hi-tab-close {
      opacity: 1;
    }
  }

  // Disabled state
  &.hi-tab-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }

  // Focus state
  &:focus-visible {
    outline: none;
    box-shadow:
      0 0 0 2px var(--hi-primary),
      0 0 12px var(--hi-primary);
  }
}

// ============================================
// Glowing Indicator (for active tab)
// ============================================

.hi-tabs-indicator {
  // Layout
  position: absolute;
  bottom: 0;
  left: 0;

  // Appearance
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--hi-color-primary) 0%,
    var(--hi-primary) 50%,
    var(--hi-color-primary) 100%
  );

  // Glow effect
  box-shadow:
    0 0 8px var(--hi-color-primary),
    0 0 16px var(--hi-primary);

  // Transitions - smooth sliding animation
  // DISABLED - migrated to JS animation

  // transition: all vars.$hikari-duration-normal vars.$hikari-ease-smooth;

  // Border radius
  border-radius: 2px 2px 0 0;
}

// ============================================
// Tabs Content
// ============================================

.hi-tabs-content {
  // Layout
  position: relative;

  // Spacing
  padding: 1rem;

  // Overflow
  overflow: hidden;
}

// ============================================
// Tab Panel
// ============================================

.hi-tab-panel {
  // Layout
  display: none;

  // Animation
  opacity: 0;
  transform: translateX(16px);

  // Active state
  &.hi-tab-panel-active {
    display: block;
    // DISABLED - migrated to JS animation

    // animation: tab-panel-fade-in vars.$hikari-duration-normal vars.$hikari-ease-smooth forwards;
  }
}

// DISABLED - migrated to JS animation
// @keyframes tab-panel-fade-in {
//   from {
//     opacity: 0;
//     transform: translateX(16px);
//   }
//   to {
//     opacity: 1;
//     transform: translateX(0);
//   }
// }

// ============================================
// Position Variants
// ============================================

// Top (default)
.hi-tabs-top {
  .hi-tabs-header {
    border-bottom: 1px solid var(--hi-color-border);
  }

  .hi-tabs-indicator {
    bottom: 0;
    border-radius: 2px 2px 0 0;
  }
}

// Bottom
.hi-tabs-bottom {
  flex-direction: column-reverse;

  .hi-tabs-header {
    border-top: 1px solid var(--hi-color-border);
    border-bottom: none;
  }

  .hi-tabs-indicator {
    top: 0;
    bottom: auto;
    border-radius: 0 0 2px 2px;
  }
}

// Left
.hi-tabs-left {
  flex-direction: row;

  .hi-tabs-header {
    flex-direction: column;
    border-right: 1px solid var(--hi-color-border);
    border-bottom: none;
    min-width: 200px;
  }

  .hi-tabs-nav {
    flex-direction: column;
    width: 100%;
  }

  .hi-tab {
    width: 100%;
    justify-content: flex-start;
  }

  .hi-tabs-indicator {
    top: 0;
    left: 0;
    right: auto;
    width: 3px;
    height: auto;
    border-radius: 0 2px 2px 0;
  }
}

// Right
.hi-tabs-right {
  flex-direction: row-reverse;

  .hi-tabs-header {
    flex-direction: column;
    border-left: 1px solid var(--hi-color-border);
    border-bottom: none;
    min-width: 200px;
  }

  .hi-tabs-nav {
    flex-direction: column;
    width: 100%;
  }

  .hi-tab {
    width: 100%;
    justify-content: flex-start;
  }

  .hi-tabs-indicator {
    top: 0;
    right: 0;
    left: auto;
    width: 3px;
    height: auto;
    border-radius: 2px 0 0 2px;
  }
}

// ============================================
// Type Variants
// ============================================

// Card type (with background and border)
.hi-tabs-type-card {
  background: var(--hi-surface);
  backdrop-filter: blur(4px);
  border: 1px solid var(--hi-color-border);
  border-radius: vars.$hikari-radius-fui-md;
  box-shadow:
    0 4px 8px var(--hi-tertiary-bg, rgba(240, 240, 244, 0.5)),
    0 0 0 1px var(--hi-white-5, rgba(255, 255, 255, 0.05)) inset;

  .hi-tabs-header {
    background: var(--hi-tertiary-bg, rgba(240, 240, 244, 0.5));
    border-radius: vars.$hikari-radius-fui-md vars.$hikari-radius-fui-md 0 0;
    margin: 0;
  }

  .hi-tab {
    border-radius: vars.$hikari-radius-fui-sm;
    margin: 0.25rem;

    &.hi-tab-active {
      background: var(--hi-color-primary, var(--hi-primary, #FFB3A7));
      box-shadow:
        0 0 12px var(--hi-glow-primary-md, rgba(255, 179, 167, 0.5)),
        inset 0 0 8px rgba(255, 255, 255, 0.1);
    }
  }

  .hi-tabs-content {
    border-radius: 0 0 vars.$hikari-radius-fui-md vars.$hikari-radius-fui-md;
  }
}

// Border card type (more prominent border)
.hi-tabs-type-border-card {
  background: var(--hi-surface);
  backdrop-filter: blur(4px);
  border: 2px solid var(--hi-color-border);
  border-radius: vars.$hikari-radius-fui-md;
  box-shadow:
    0 4px 8px var(--hi-tertiary-bg, rgba(240, 240, 244, 0.5)),
    0 0 0 1px var(--hi-white-5, rgba(255, 255, 255, 0.05)) inset;

  .hi-tabs-header {
    background: var(--hi-tertiary-bg, rgba(240, 240, 244, 0.5));
  }

  .hi-tab {
    border: 1px solid transparent;
    margin: 0.25rem;

    &.hi-tab-active {
      background: var(--hi-color-primary, var(--hi-primary, #FFB3A7));
      border-color: var(--hi-color-primary);
      box-shadow:
        0 0 12px var(--hi-glow-primary-md, rgba(255, 179, 167, 0.5)),
        inset 0 0 8px rgba(255, 255, 255, 0.1);
    }
  }
}

// Segment type (pill-shaped)
.hi-tabs-type-segment {
  .hi-tabs-header {
    background: var(--hi-button-primary-light, rgba(255, 192, 203, 0.15));
    border-radius: vars.$hikari-radius-fui-md;
    border: none;
    padding: 0.375rem;
    margin-bottom: 0.5rem;
  }

  .hi-tab {
    border-radius: vars.$hikari-radius-fui-sm;

    &.hi-tab-active {
      background: linear-gradient(135deg, var(--hi-primary), rgba(109, 40, 217, 0.9));
      box-shadow:
        0 0 12px var(--hi-primary),
        inset 0 0 8px var(--hi-white-10, rgba(255, 255, 255, 0.1));
    }
  }

  .hi-tabs-indicator {
    display: none;
  }
}

// ============================================
// Size Variants
// ============================================

.hi-tabs-sm {
  .hi-tab {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;

    .hi-tab-icon {
      width: 0.875rem;
      height: 0.875rem;
    }
  }

  .hi-tabs-content {
    padding: 0.75rem;
  }
}

.hi-tabs-md {
  .hi-tab {
    padding: 0.625rem 1rem;
    font-size: vars.$hikari-font-size-sm;
  }

  .hi-tabs-content {
    padding: 1rem;
  }
}

.hi-tabs-lg {
  .hi-tab {
    padding: 0.75rem 1.25rem;
    font-size: 0.9375rem;

    .hi-tab-icon {
      width: 1.125rem;
      height: 1.125rem;
    }
  }

  .hi-tabs-content {
    padding: 1.5rem;
  }
}

// ============================================
// Add/Remove Actions
// ============================================

.hi-tabs-add-button {
  // Layout
  display: flex;
  align-items: center;
  justify-content: center;

  // Spacing
  width: 2rem;
  height: 2rem;
  margin-left: 0.5rem;

  // Appearance
  background: var(--hi-primary);
  border: 1px solid var(--hi-primary);
  border-radius: vars.$hikari-radius-fui-sm;
  color: var(--hi-color-primary);

  // Cursor
  cursor: pointer;

  // Transitions
  // DISABLED - migrated to JS animation

  // transition: all vars.$hikari-duration-fast vars.$hikari-ease-smooth;

  // Icon
  svg {
    width: 1rem;
    height: 1rem;
  }

  &:hover {
    background: var(--hi-primary);
    border-color: var(--hi-primary);
    box-shadow:
      0 0 12px var(--hi-primary),
      inset 0 0 8px var(--hi-primary);
  }

  &:active {
    transform: scale(0.95);
  }
}

// ============================================
// Animated Transitions
// ============================================

// Slide animation for tab content
.hi-tabs-animated {
  .hi-tab-panel {
    &.hi-tab-panel-active {
      // DISABLED - migrated to JS animation

      // animation: tab-panel-slide-in vars.$hikari-duration-normal vars.$hikari-ease-smooth forwards;
    }
  }
}

// DISABLED - migrated to JS animation
// @keyframes tab-panel-slide-in {
//   from {
//     opacity: 0;
//     transform: translateX(24px);
//   }
//   to {
//     opacity: 1;
//     transform: translateX(0);
//   }
// }

// Fade animation
.hi-tabs-fade {
  .hi-tab-panel {
    &.hi-tab-panel-active {
      // DISABLED - migrated to JS animation

      // animation: tab-panel-fade-only vars.$hikari-duration-normal vars.$hikari-ease-smooth forwards;
    }
  }
}

// DISABLED - migrated to JS animation
// @keyframes tab-panel-fade-only {
//   from {
//     opacity: 0;
//   }
//   to {
//     opacity: 1;
//   }
// }

// Zoom animation
.hi-tabs-zoom {
  .hi-tab-panel {
    &.hi-tab-panel-active {
      // DISABLED - migrated to JS animation

      // animation: tab-panel-zoom-in vars.$hikari-duration-normal vars.$hikari-ease-smooth forwards;
    }
  }
}

// DISABLED - migrated to JS animation
// @keyframes tab-panel-zoom-in {
//   from {
//     opacity: 0;
//     transform: scale(0.95);
//   }
//   to {
//     opacity: 1;
//     transform: scale(1);
//   }
// }

// ============================================
// Scrollable Tabs
// ============================================

.hi-tabs-scrollable {
  .hi-tabs-header {
    &::before,
    &::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      width: 48px;
      pointer-events: none;
      z-index: 1;
      opacity: 0;
      // DISABLED - migrated to JS animation

      // transition: opacity vars.$hikari-duration-fast vars.$hikari-ease-smooth;
    }

    &::before {
      left: 0;
      background: linear-gradient(90deg, var(--hi-card-bg), transparent);
    }

    &::after {
      right: 0;
      background: linear-gradient(-90deg, var(--hi-card-bg), transparent);
    }
  }

  &.hi-tabs-scroll-left .hi-tabs-header::before,
  &.hi-tabs-scroll-right .hi-tabs-header::after {
    opacity: 1;
  }
}

// Navigation buttons for scrollable tabs
.hi-tabs-nav-button {
  // Layout
  display: flex;
  align-items: center;
  justify-content: center;

  // Spacing
  width: 2rem;
  height: 2rem;

  // Appearance
  background: var(--hi-surface);
  backdrop-filter: blur(4px);
  border: 1px solid var(--hi-color-border);
  border-radius: vars.$hikari-radius-fui-sm;
  color: var(--hi-color-text-primary);

  // Cursor
  cursor: pointer;

  // Transitions
  // DISABLED - migrated to JS animation

  // transition: all vars.$hikari-duration-fast vars.$hikari-ease-smooth;

  // Icon
  svg {
    width: 1rem;
    height: 1rem;
  }

  &:hover {
    background: var(--hi-primary);
    border-color: var(--hi-primary);
    --hi-glow-transparent: false;
    --hi-glow-bg-color: var(--hi-primary);
    box-shadow: 0 0 12px var(--hi-glow-color);
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}