hikari-components 0.1.8

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

// ============================================
// Hikari Sidebar Component - Multi-level Navigation

// ============================================
// Base Sidebar Styles
// ============================================

.hi-sidebar {
  // Layout
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  // Appearance - transparent background for integration
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;

  // Overflow handling
  overflow-x: hidden;
  overflow-y: auto;

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

// ============================================
// Sidebar Section - Top-level collapsible category
// ============================================

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

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

  &:last-child {
    border-bottom: none;
  }
}

.hi-sidebar-section-header {
  // Layout
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;

  // Spacing
  padding: 0.875rem 1rem;

  // Cursor
  cursor: pointer;

  // Prevent text selection - behave like a button
  user-select: none;

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

  // Hover state is handled by Glow component
  // The Glow wrapper already handles mouse events and updates --glow-intensity-scale
  // We just need to ensure the glow is visible when hovering
}

// Hover state for Glow wrapper around section header
.hi-glow-wrapper:has(.hi-sidebar-section-header) {
  &:hover,
  &[data-glow-hover="true"] {
    --glow-intensity-scale: 0.5;
  }
}

.hi-sidebar-section-title-group {
  // Layout
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
}

.hi-sidebar-section-title-primary {
  // Typography
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--hi-color-text-primary);
}

.hi-sidebar-section-title-secondary {
  // Typography
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--hi-color-text-secondary);
}

.hi-sidebar-section-arrow {
  // Layout
  display: flex;
  align-items: center;
  justify-content: center;

  // Size
  width: 1rem;
  height: 1rem;

  // Color
  color: var(--hi-color-text-secondary);

  // Transition
  transition: transform vars.$hikari-duration-normal ease;

  // Rotated state (expanded)
  &.rotated {
    transform: rotate(180deg);
  }

  // SVG styling
  svg {
    width: 100%;
    height: 100%;
  }
}

.hi-sidebar-section-children {
  // Layout
  display: flex;
  flex-direction: column;

  // Transparent background (blends with page, no "whitewash")
  background: transparent;

  // Hide when collapsed
  &[data-expanded="false"] {
    display: none;
  }
}

// ============================================
// Sidebar Item - Clickable navigation item
// ============================================

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

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

  &:last-child {
    border-bottom: none;
  }
}

.hi-sidebar-item-header {
  // Layout
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;

  // Spacing
  padding: 0.75rem 1rem 0.75rem 1.5rem;

  // Typography - increase to 14px
  font-size: 0.875rem;  // 14px
  line-height: 1.25;    // 17.5px for proper alignment
  font-weight: 500;
  color: var(--hi-color-text-primary);

  // Cursor - always clickable
  cursor: pointer;
  text-decoration: none;

  // Prevent text selection and dragging - behave like a button
  user-select: none;

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

  // Hover state is handled by Glow component
}

// Hover state for Glow wrapper around item header
.hi-glow-wrapper:has(.hi-sidebar-item-header) {
  &:hover,
  &[data-glow-hover="true"] {
    --glow-intensity-scale: 0.5;
  }
}

.hi-sidebar-item-content {
  // Layout
  display: flex;
  align-items: center;
  gap: 0.875rem;  // 14px gap between icon and text

  // Make content fill available space
  flex: 1;

  // Prevent text selection - behave like a button
  user-select: none;

  // Position relative for absolute positioned link
  position: relative;

  // Ensure links inside content fill the entire header area
  & a,
  & .hi-sidebar-item-content-inner {
    color: inherit;
    text-decoration: none;
    // Allow pointer events on links but prevent bubbling to parent
    pointer-events: auto;
    // Make link fill entire header area (offset parent padding)
    position: absolute;
    left: -1.5rem;
    right: -1rem;
    top: -0.75rem;
    bottom: -0.75rem;
    // Inner content for proper layout
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding-left: 1.5rem;
  }
}

.hi-sidebar-item-arrow {
  // Layout
  display: flex;
  align-items: center;
  justify-content: center;

  // Size - visual only, no padding since header handles clicks
  width: 1rem;
  height: 1rem;

  // Cursor - inherit from parent header
  cursor: default;

  // Color - inherit from theme
  color: var(--hi-color-text-secondary);

  // Transition - only rotation
  transition: transform vars.$hikari-duration-normal ease;

  // Rotated state (expanded)
  &.rotated {
    transform: rotate(90deg);
  }

  // SVG styling
  svg {
    width: 100%;
    height: 100%;
  }
}

.hi-sidebar-item-children {
  // Layout
  display: flex;
  flex-direction: column;

  // Transparent background (no "whitewash")
  background: transparent;

  // Hide when collapsed
  &[data-expanded="false"] {
    display: none;
  }
}

// ============================================
// Sidebar Leaf - Terminal item without children
// ============================================

.hi-sidebar-leaf {
  // Border between items
  border-bottom: 1px solid var(--hi-color-border);

  &:last-child {
    border-bottom: none;
  }
}

.hi-sidebar-leaf-content {
  // Layout
  display: flex;
  align-items: center;
  gap: 0.875rem;  // 14px gap between icon and text

  // Spacing
  padding: 0.625rem 1rem 0.625rem 2.5rem;

  // Typography - increased to 14px
  font-size: 0.875rem;  // 14px
  line-height: 1.25;    // 17.5px for proper alignment
  font-weight: 400;
  color: var(--hi-color-text-secondary);
  text-decoration: none;

  // Prevent text selection and dragging - behave like a button
  user-select: none;

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

  // Cursor
  cursor: pointer;

  // Inherit styling for links - make link fill entire area
  & > a {
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    width: 100%;
    height: 100%;
    padding: inherit;
    // Negative margins to extend to parent's edge
    margin: -0.625rem -1rem -0.625rem -2.5rem;
    padding-left: 2.5rem;
  }

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

  // Active state
  &.active {
    color: var(--hi-badge-text, #FFFFFF);
    background: var(--hi-color-primary, var(--hi-primary, #FFC0CB));
    font-weight: 600;
    border-left: 3px solid var(--hi-button-primary-dark, #FF9AA9);
    padding-left: calc(2.5rem - 3px);
    box-shadow: inset 0 0 12px var(--hi-glow-primary-sm, rgba(255, 179, 167, 0.15));
  }
}

// ============================================
// Active State Support
// ============================================

// Add active state styling to item content when parent has data-active
.hi-sidebar-item[data-active="true"] > .hi-sidebar-item-header > .hi-sidebar-item-content {
  color: var(--hi-color-text-primary);  // Use text-primary instead of primary
  background: var(--hi-color-primary);
  font-weight: 500;
  border-left: 3px solid var(--hi-color-primary);
  padding-left: calc(1.5rem - 3px);
  margin-left: -3px;
}

// ============================================
// Nested Level Indentation
// ============================================

// Each nested level adds indentation
.hi-sidebar-item-children .hi-sidebar-item-header {
  padding-left: 2rem;
}

.hi-sidebar-item-children .hi-sidebar-item-children .hi-sidebar-item-header {
  padding-left: 2.5rem;
}

.hi-sidebar-item-children .hi-sidebar-item-children .hi-sidebar-item-children .hi-sidebar-item-header {
  padding-left: 3rem;
}

// ============================================
// Icon Alignment
// ============================================

// Fix Icon component wrapper alignment in flex containers
.hi-sidebar-item-content .hikari-icon,
.hi-sidebar-leaf-content .hikari-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 0.875rem;   // 14px
  height: 0.875rem;  // 14px
}

// Icon size variants (used by Icon component)
// These override default sizes when used in sidebar
.hi-sidebar-item-content .hikari-icon-16,
.hi-sidebar-leaf-content .hikari-icon-16 {
  width: 0.875rem;  // 14px
  height: 0.875rem; // 14px
}

.hi-sidebar-item-content .hikari-icon-24,
.hi-sidebar-leaf-content .hikari-icon-24 {
  width: 1rem;     // 16px
  height: 1rem;    // 16px
}

// Link content inside sidebar items - make them flex containers
// Note: .hi-sidebar-item-content-inner is handled with absolute positioning in .hi-sidebar-item-content
.hi-sidebar-item-content-inner {
  display: flex;
  align-items: center;
  gap: 0.875rem;  // 14px gap between icon and text
  width: 100%;
}

// Direct SVG styling (for inline SVGs)
.hi-sidebar-item-content svg,
.hi-sidebar-leaf-content svg {
  flex-shrink: 0;
  display: block;
  width: 0.875rem;   // 14px
  height: 0.875rem;  // 14px
  color: currentColor;
}

// ============================================
// Responsive Variants
// ============================================

// Compact variant
.hi-sidebar-compact {
  .hi-sidebar-section-header {
    padding: 0.625rem 0.75rem;
  }

  .hi-sidebar-item-header {
    padding: 0.5rem 0.75rem 0.5rem 1.25rem;
  }

  .hi-sidebar-leaf-content {
    padding: 0.5rem 0.75rem 0.5rem 2rem;
  }
}

// Minimal variant (icon-only on small screens)
@media (max-width: 768px) {
  .hi-sidebar-minimal {
    .hi-sidebar-section-title-secondary,
    .hi-sidebar-item-arrow {
      display: none;
    }
  }
}