hikari-components 0.1.5

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

// ============================================
// Hikari Breadcrumb Component
// Features: Glowing separators, smooth transitions, hover effects
// ============================================

// ============================================
// Base Breadcrumb Styles
// ============================================

.hi-breadcrumb {
  // Layout
  display: flex;
  align-items: center;
  flex-wrap: wrap;

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

  // Typography
  font-family: vars.$hikari-font-family-sans;
  font-size: vars.$hikari-font-size-sm;
  line-height: 1.5;

  // Gap
  gap: 0.5rem;
}

// ============================================
// Breadcrumb Item
// ============================================

.hi-breadcrumb-item {
  // Layout
  display: flex;
  align-items: center;

  // Spacing
  margin: 0;

  // Position
  position: relative;

  // Not the last item
  &:not(:last-child) {
    // Separator
    .hi-breadcrumb-separator {
      margin-left: 0.5rem;
      color: var(--hi-color-text-secondary);
      opacity: 0.5;
      // DISABLED - migrated to JS animation

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

      // Glow effect on separator
      filter: drop-shadow(0 0 4px var(--hi-primary));

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

  // Last item (current page)
  &:last-child {
    .hi-breadcrumb-link {
      color: var(--hi-color-text-primary);
      font-weight: 500;
      cursor: default;
      pointer-events: none;

      // Subtle glow on current item
      text-shadow: 0 0 8px var(--hi-primary);
    }
  }
}

// ============================================
// Breadcrumb Link
// ============================================

.hi-breadcrumb-link {
  // Typography
  color: var(--hi-color-text-secondary);
  text-decoration: none;
  white-space: nowrap;

  // Cursor
  cursor: pointer;

  // Transitions
  // DISABLED - migrated to JS animation

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

  // Padding
  padding: 0.25rem 0.5rem;
  margin: -0.25rem -0.5rem;
  border-radius: vars.$hikari-radius-fui-sm;

  // Display
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;

  // Icon
  .hi-breadcrumb-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%;
    }
  }

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

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

    // Glow effect on text
    text-shadow: 0 0 8px var(--hi-primary);
  }

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

  // Active state (for non-last items)
  &.hi-breadcrumb-link-active {
    color: var(--hi-color-text-primary);
    font-weight: 500;
  }
}

// ============================================
// Breadcrumb Separator
// ============================================

.hi-breadcrumb-separator {
  // Layout
  display: inline-flex;
  align-items: center;

  // Typography
  font-size: 0.875rem;

  // Transitions
  // DISABLED - migrated to JS animation

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

  // Custom separator glow
  &.hi-breadcrumb-separator-glow {
    color: var(--hi-color-primary);
    opacity: 0.8;
    filter: drop-shadow(0 0 6px var(--hi-primary));
  }
}

// ============================================
// Separator Variants
// ============================================

// Slash separator
.hi-breadcrumb-separator-slash {
  &::before {
    content: '/';
  }
}

// Arrow separator
.hi-breadcrumb-separator-arrow {
  &::before {
    content: '›';
    font-size: 1.1em;
  }
}

// Double arrow separator
.hi-breadcrumb-separator-double-arrow {
  &::before {
    content: '»';
    font-size: 0.9em;
  }
}

// Chevron separator (default with icon)
.hi-breadcrumb-separator-chevron {
  // Uses chevron-right icon
}

// Dot separator
.hi-breadcrumb-separator-dot {
  &::before {
    content: '•';
    font-size: 1.2em;
  }
}

// ============================================
// Breadcrumb Dropdown (for nested paths)
// ============================================

.hi-breadcrumb-dropdown {
  // Layout
  position: relative;
  display: inline-flex;
  align-items: center;

  // Trigger
  .hi-breadcrumb-dropdown-trigger {
    // Layout
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;

    // Arrow icon
    .hi-breadcrumb-dropdown-arrow {
      width: 0.75rem;
      height: 0.75rem;
      // DISABLED - migrated to JS animation

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

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

    // Open state
    &.hi-breadcrumb-dropdown-open {
      .hi-breadcrumb-dropdown-arrow {
        transform: rotate(180deg);
      }
    }
  }

  // Dropdown menu
  .hi-breadcrumb-dropdown-menu {
    // Layout
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 200px;
    z-index: 100;

    // Appearance
    border-radius: vars.$hikari-radius-fui-md;
    border: 1px solid var(--hi-color-border);
    background: var(--hi-surface);
    backdrop-filter: blur(4px);
    box-shadow:
      0 8px 16px var(--hi-black-30, rgba(0, 0, 0, 0.3)),
      0 0 0 1px var(--hi-white-5, rgba(255, 255, 255, 0.05)) inset;

    // Padding
    padding: 0.5rem;

    // Transitions
    // DISABLED - migrated to JS animation

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

    // Animation
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;

    // Open state
    &.hi-breadcrumb-dropdown-menu-open {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    // Menu items
    .hi-breadcrumb-dropdown-item {
      // Layout
      display: flex;
      align-items: center;
      gap: 0.5rem;

      // Spacing
      padding: 0.5rem 0.75rem;
      margin: 0.125rem 0;

      // Typography
      font-size: vars.$hikari-font-size-sm;
      color: var(--hi-color-text-primary);
      text-decoration: none;
      white-space: nowrap;

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

      // Cursor
      cursor: pointer;

      // Transitions
      // DISABLED - migrated to JS animation

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

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

// ============================================
// Icon Styles
// ============================================

.hi-breadcrumb-icon {
  // Layout
  display: inline-flex;
  align-items: center;

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

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

  // Transitions
  // DISABLED - migrated to JS animation

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

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

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

.hi-breadcrumb-sm {
  font-size: 0.75rem;
  gap: 0.375rem;

  .hi-breadcrumb-link {
    padding: 0.125rem 0.375rem;
    margin: -0.125rem -0.375rem;

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

  .hi-breadcrumb-separator {
    margin-left: 0.375rem;
    font-size: 0.75rem;

    svg {
      width: 0.875rem;
      height: 0.875rem;
    }
  }
}

.hi-breadcrumb-md {
  font-size: vars.$hikari-font-size-sm;
  gap: 0.5rem;
}

.hi-breadcrumb-lg {
  font-size: 1rem;
  gap: 0.625rem;

  .hi-breadcrumb-link {
    padding: 0.375rem 0.625rem;
    margin: -0.375rem -0.625rem;

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

  .hi-breadcrumb-separator {
    margin-left: 0.625rem;
    font-size: 1rem;

    svg {
      width: 1.125rem;
      height: 1.125rem;
    }
  }
}

// ============================================
// Theme Variants
// ============================================

// With background
.hi-breadcrumb-background {
  gap: 0;

  .hi-breadcrumb-item {
    background: var(--hi-card-bg);
    padding: 0.375rem 0.75rem;
    border-radius: vars.$hikari-radius-fui-sm;
    // DISABLED - migrated to JS animation

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

    &:not(:last-child):hover {
      background: var(--hi-primary);
    }

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

// Pill style
.hi-breadcrumb-pill {
  .hi-breadcrumb-item {
    background: var(--hi-card-bg);
    padding: 0.375rem 0.875rem;
    border-radius: 999px;
    border: 1px solid var(--hi-color-border);
    // DISABLED - migrated to JS animation

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

    &:not(:last-child) {
      &:hover {
        background: var(--hi-primary);
        border-color: var(--hi-primary);
      }
    }

    &:last-child {
      background: var(--hi-color-primary, var(--hi-primary, #FFC0CB));
      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);
    }
  }
}

// ============================================
// Separator Animations
// ============================================

// Animated separator (pulsing glow)
.hi-breadcrumb-separator-animated {
  // DISABLED - migrated to JS animation

  // animation: breadcrumb-separator-pulse 2s ease-in-out infinite;
}

// DISABLED - migrated to JS animation
// @keyframes breadcrumb-separator-pulse {
//   0%, 100% {
//     opacity: 0.5;
//     filter: drop-shadow(0 0 4px var(--hi-primary));
//   }
//   50% {
//     opacity: 1;
//     filter: drop-shadow(0 0 8px var(--hi-primary));
//   }
// }

// ============================================
// Collapsible Breadcrumb (for mobile)
// ============================================

.hi-breadcrumb-collapsible {
  // Hide middle items on small screens
  .hi-breadcrumb-item {
    &:nth-child(n+2):nth-last-child(n+3) {
      @media (max-width: 768px) {
        display: none;
      }
    }

    // Show ellipsis
    &.hi-breadcrumb-ellipsis {
      @media (max-width: 768px) {
        display: flex;
      }
    }
  }
}

// ============================================
// Animations
// ============================================

// Fade-in animation
.hi-breadcrumb-animate-in {
  .hi-breadcrumb-item {
    opacity: 0;
    // DISABLED - migrated to JS animation

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

    @for $i from 1 through 10 {
      &:nth-child(#{$i}) {
        animation-delay: #{$i * 0.1s};
      }
    }
  }
}

// DISABLED - migrated to JS animation
// @keyframes breadcrumb-fade-in {
//   from {
//     opacity: 0;
//     transform: translateY(-4px);
//   }
//   to {
//     opacity: 1;
//     transform: translateY(0);
//   }
// }

// Slide-in animation
.hi-breadcrumb-slide-in {
  .hi-breadcrumb-item {
    opacity: 0;
    // DISABLED - migrated to JS animation

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

    @for $i from 1 through 10 {
      &:nth-child(#{$i}) {
        animation-delay: #{$i * 0.08s};
      }
    }
  }
}

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

// ============================================
// Custom Colors
// ============================================

.hi-breadcrumb-primary {
  .hi-breadcrumb-link {
    &:hover {
      color: var(--hi-color-primary);
      text-shadow: 0 0 8px var(--hi-color-primary);
    }
  }
}

.hi-breadcrumb-success {
  .hi-breadcrumb-link {
    &:hover {
      color: var(--hi-color-success);
      text-shadow: 0 0 8px var(--hi-color-success);
    }
  }
}

.hi-breadcrumb-warning {
  .hi-breadcrumb-link {
    &:hover {
      color: var(--hi-color-warning);
      text-shadow: 0 0 8px var(--hi-color-warning);
    }
  }
}

.hi-breadcrumb-danger {
  .hi-breadcrumb-link {
    &:hover {
      color: var(--hi-color-danger);
      text-shadow: 0 0 8px var(--hi-color-danger);
    }
  }
}