hikari-components 0.2.1

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

// ============================================
// Hikari Header Component
// Features: Glass/acrylic effects, bottom accent bar, glow effects
// ============================================

// ============================================
// Base Header Styles
// ============================================

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

  // Fixed height - 64px for consistent header sizing
  height: 64px;
  min-height: 64px;

  // Spacing - 减小内边距
  padding: 0 1rem;
  margin: 0;

  // Appearance - 移除圆角
  border-radius: 0;

  // Semi-transparent surface background (theme-aware, mint-tinted for legacy match)
  background: var(--hi-header-surface, var(--hi-surface));
  backdrop-filter: blur(4px);

  // Simple border (mint-tinted to match legacy)
  border-bottom: 1px solid var(--hi-color-background, var(--hi-border));
  box-shadow: 0 1px 3px var(--hi-black-10, rgba(0, 0, 0, 0.05));

  // Transitions - smooth GSAP-style easing
  // DISABLED - migrated to JS animation

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

  // Position
  position: relative;

  // Sticky positioning
  &.hi-header-sticky {
    position: sticky;
    top: 0;
    z-index: 100;
  }

  // Fixed positioning
  &.hi-header-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    border-radius: 0;
  }

  // Scrolled state (applied via JS)
  &.hi-header-scrolled {
    background: var(--hi-card-bg);
    backdrop-filter: blur(4px);
    --hi-glow-transparent: false;
    --hi-glow-bg-color: var(--hi-card-bg);
    box-shadow:
      0 8px 24px var(--hi-glow-primary-sm, rgba(255, 179, 167, 0.2)),
      0 0 40px var(--hi-glow-color);

    &::before {
      opacity: 1;
      height: 4px;
    }
  }

  // Responsive padding - 固定64px高度，调整内边距
  @include mix.mobile {
    padding: 0 0.75rem;
  }

  @include mix.tablet {
    padding: 0 1rem;
  }

  @include mix.desktop {
    padding: 0 1rem;
  }
}

// ============================================
// Header Left Section
// ============================================

.hi-header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 0 1 auto; // 改为不自动扩展，根据内容自适应宽度
  min-width: 0;
}

// ============================================
// Header Logo Area
// ============================================

.hi-header-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--hi-color-text-primary);
  // DISABLED - migrated to JS animation

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

  // Logo icon/image
  .hi-header-logo-icon {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    // Glow effect
    border-radius: vars.$hikari-radius-fui-sm;
    background: linear-gradient(135deg, var(--hi-primary), rgba(238, 162, 164, 0.2));
    --hi-glow-transparent: false;
    --hi-glow-bg-color: var(--hi-primary);
    box-shadow:
      0 0 12px var(--hi-glow-color),
      inset 0 0 8px var(--hi-glow-color);

    svg {
      width: 100%;
      height: 100%;
      filter: drop-shadow(0 0 4px var(--hi-glow-color));
      // DISABLED - migrated to JS animation

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

    // Animation on hover
    .hi-header-logo:hover & {
      box-shadow:
        0 0 20px var(--hi-glow-color),
        inset 0 0 12px var(--hi-glow-color);
      transform: scale(1.05);

      svg {
        filter: drop-shadow(0 0 8px var(--hi-glow-color));
      }
    }
  }

  // Logo text
  .hi-header-logo-text {
    font-family: vars.$hikari-font-family-sans;
    font-size: vars.$hikari-font-size-lg;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;

    // Subtle text glow
    --hi-glow-transparent: true;
    --hi-glow-bg-color: transparent;
    text-shadow: 0 0 8px var(--hi-glow-color);

    // Truncate on small screens
    @include mix.mobile {
      @include mix.text-ellipsis;
      max-width: 120px;
    }

    @include mix.tablet {
      max-width: 200px;
    }
  }

  // Logo subtitle
  .hi-header-logo-subtitle {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--hi-color-text-secondary);
    margin-top: 0.125rem;

    @include mix.mobile {
      display: none;
    }
  }

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

    .hi-header-logo-text {
      --hi-glow-transparent: true;
      --hi-glow-bg-color: transparent;
      text-shadow: 0 0 12px var(--hi-glow-color);
    }
  }
}

// ============================================
// Header Center Section (Menu)
// ============================================

.hi-header-center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 2;

  @include mix.mobile {
    display: none;
  }
}

// Navigation menu in header
.hi-header-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;

  .hi-header-nav-item {
    position: relative;
    padding: 0.5rem 1rem;
    font-family: vars.$hikari-font-family-sans;
    font-size: vars.$hikari-font-size-sm;
    font-weight: 500;
    color: var(--hi-color-text-secondary);
    text-decoration: none;
    border-radius: vars.$hikari-radius-fui-sm;
    // DISABLED - migrated to JS animation

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

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

    // Active state
    &.hi-header-nav-item-active {
      color: var(--hi-color-text-primary);
      background: var(--hi-primary);
      --hi-glow-transparent: false;
      --hi-glow-bg-color: var(--hi-primary);

      // Bottom accent line
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 1rem;
        right: 1rem;
        height: 2px;
        background: var(--hi-color-primary);
        box-shadow: 0 0 8px var(--hi-glow-color);
        border-radius: 1px;
      }
    }
  }
}

// ============================================
// Header Right Section (Actions)
// ============================================

.hi-header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  justify-content: flex-end;
}

// ============================================
// Header Action Buttons
// ============================================

.hi-header-action {
  // Layout
  display: inline-flex;
  align-items: center;
  justify-content: center;

  // Sizing
  width: 2.25rem;
  height: 2.25rem;

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

  // Cursor
  cursor: pointer;
  outline: none;

  // Transitions
  // DISABLED - migrated to JS animation

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

  // Icon
  svg {
    width: 1.125rem;
    height: 1.125rem;
    // DISABLED - migrated to JS animation

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

  // Hover state
  &:hover {
    color: var(--hi-color-text-primary);
    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),
      inset 0 0 8px var(--hi-glow-color);

    svg {
      filter: drop-shadow(0 0 4px var(--hi-glow-color));
      transform: scale(1.1);
    }
  }

  // Active state
  &:active {
    transform: scale(0.95);
  }

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

  // Badge indicator
  &.hi-header-action-badge {
    &::after {
      content: '';
      position: absolute;
      top: 0.25rem;
      right: 0.25rem;
      width: 0.5rem;
      height: 0.5rem;
      background: var(--hi-color-danger);
      border-radius: 50%;
      box-shadow: 0 0 6px rgba(255, 76, 0, 0.8);
      // DISABLED - migrated to JS animation

      // animation: header-badge-pulse 2s ease-in-out infinite;
    }
  }
}

// DISABLED - migrated to JS animation
// @keyframes header-badge-pulse {
//   0%, 100% {
//     opacity: 1;
//     transform: scale(1);
//   }
//   50% {
//     opacity: 0.7;
//     transform: scale(1.1);
//   }
// }

// ============================================
// Header Search
// ============================================

.hi-header-search {
  position: relative;
  width: 240px;

  @include mix.mobile {
    display: none;
  }

  @include mix.tablet {
    width: 200px;
  }

  // Search input
  .hi-header-search-input {
    width: 100%;
    padding: 0.5rem 1rem 0.5rem 2.25rem;
    font-family: vars.$hikari-font-family-sans;
    font-size: vars.$hikari-font-size-sm;
    color: var(--hi-color-text-primary);
    background: var(--hi-tertiary-bg, rgba(240, 240, 244, 0.5));
    border: 1px solid var(--hi-primary);
    border-radius: vars.$hikari-radius-fui-sm;
    outline: none;
    // DISABLED - migrated to JS animation

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

    &::placeholder {
      color: var(--hi-color-text-secondary);
      opacity: 0.7;
    }

    // Hover state
    &:hover {
      border-color: var(--hi-primary);
      background: var(--hi-button-primary-light, rgba(255, 192, 203, 0.15));
    }

    // Focus state
    &:focus {
      border-color: var(--hi-color-primary);
      background: var(--hi-input-bg-focus, #FFFFFF);
      --hi-glow-transparent: false;
      --hi-glow-bg-color: var(--hi-button-primary-light, #FFE4E9);
      box-shadow:
        0 0 0 2px var(--hi-primary),
        0 0 12px var(--hi-glow-color);
    }
  }

  // Search icon
  .hi-header-search-icon {
    position: absolute;
    left: 0.625rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    color: var(--hi-color-text-secondary);
    pointer-events: none;

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

  // Focus state on icon
  .hi-header-search-input:focus + .hi-header-search-icon {
    color: var(--hi-color-primary);
  }
}

// ============================================
// Header User/Profile
// ============================================

.hi-header-user {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.375rem 0.75rem;
  border-radius: vars.$hikari-radius-fui-sm;
  cursor: pointer;
  // DISABLED - migrated to JS animation

  // transition: all vars.$hikari-duration-fast vars.$hikari-ease-smooth;
  text-decoration: none;
  color: var(--hi-color-text-primary);

  // Avatar
  .hi-header-user-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: vars.$hikari-radius-fui-sm;
    object-fit: cover;
    border: 2px solid var(--hi-primary);
    --hi-glow-transparent: false;
    --hi-glow-bg-color: var(--hi-color-surface);
    box-shadow: 0 0 8px var(--hi-glow-color);
    // DISABLED - migrated to JS animation

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

  // User info
  .hi-header-user-info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;

    @include mix.mobile {
      display: none;
    }

    // Username
    .hi-header-user-name {
      font-size: vars.$hikari-font-size-sm;
      font-weight: 500;
      line-height: 1.2;
      color: var(--hi-color-text-primary);
    }

    // User role/status
    .hi-header-user-role {
      font-size: 0.75rem;
      font-weight: 400;
      color: var(--hi-color-text-secondary);
    }
  }

  // Dropdown arrow
  .hi-header-user-arrow {
    width: 0.75rem;
    height: 0.75rem;
    color: var(--hi-color-text-secondary);
    // DISABLED - migrated to JS animation

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

    @include mix.mobile {
      display: none;
    }

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

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

    .hi-header-user-avatar {
      border-color: var(--hi-primary);
      --hi-glow-transparent: false;
      --hi-glow-bg-color: var(--hi-color-surface);
      box-shadow: 0 0 16px var(--hi-glow-color);
    }
  }

  // Open state
  &.hi-header-user-open {
    background: var(--hi-primary);

    .hi-header-user-arrow {
      transform: rotate(180deg);
      color: var(--hi-color-primary);
    }
  }
}

// ============================================
// Header Mobile Menu Toggle
// ============================================

.hi-header-toggle {
  display: none;
  align-items: center;
  justify-content: center;

  @include mix.mobile {
    display: inline-flex;
  }

  // Inherits styles from .hi-header-action
  @extend .hi-header-action;
}

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

.hi-header-sm {
  padding: 0.5rem 1rem;
  min-height: 3rem;

  .hi-header-logo-icon {
    width: 1.5rem;
    height: 1.5rem;
  }

  .hi-header-logo-text {
    font-size: vars.$hikari-font-size-base;
  }

  .hi-header-action {
    width: 2rem;
    height: 2rem;

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

.hi-header-md {
  // Inherits 64px height from base .hi-header
  padding: 0 1rem;
}

.hi-header-lg {
  padding: 1rem 2rem;
  min-height: 5rem;

  .hi-header-logo-icon {
    width: 2.5rem;
    height: 2.5rem;
  }

  .hi-header-logo-text {
    font-size: vars.$hikari-font-size-xl;
  }

  .hi-header-action {
    width: 2.5rem;
    height: 2.5rem;

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

// ============================================
// Header Color Variants
// ============================================

// Primary variant
.hi-header-primary {
  background: linear-gradient(135deg, rgba(238, 162, 164, 0.9), rgba(216, 139, 142, 0.9));

  &::before {
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.6) 50%,
      transparent 100%
    );
  }
}

// Transparent variant
.hi-header-transparent {
  background: transparent;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: none;
  border-bottom: 1px solid transparent;

  &.hi-header-scrolled {
    background: var(--hi-card-bg);
    backdrop-filter: blur(4px);
  }
}

// ============================================
// Header Collapsible (Mobile)
// ============================================

.hi-header-collapsible {
  @include mix.mobile {
    flex-wrap: wrap;

    &.hi-header-collapsed {
      .hi-header-center,
      .hi-header-right {
        display: none;
      }
    }

    &.hi-header-expanded {
      .hi-header-center,
      .hi-header-right {
        display: flex;
        flex-basis: 100%;
        order: 3;
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px solid var(--hi-primary);
      }
    }
  }
}

// ============================================
// Header Animations
// ============================================

// Slide down animation
.hi-header-slide-down {
  // DISABLED - migrated to JS animation

  // animation: header-slide-down vars.$hikari-duration-normal vars.$hikari-ease-smooth forwards;
}

// DISABLED - migrated to JS animation
// @keyframes header-slide-down {
//   from {
//     opacity: 0;
//     transform: translateY(-100%);
//   }
//   to {
//     opacity: 1;
//     transform: translateY(0);
//   }
// }

// Fade in animation
.hi-header-fade-in {
  // DISABLED - migrated to JS animation

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

// DISABLED - migrated to JS animation
// @keyframes header-fade-in {
//   from {
//     opacity: 0;
//   }
//   to {
//     opacity: 1;
//   }
// }

// ============================================
// Header with Breadcrumb
// ============================================

.hi-header-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-left: 1rem;
  border-left: 1px solid var(--hi-primary);

  @include mix.mobile {
    display: none;
  }

  .hi-header-breadcrumb-item {
    font-size: vars.$hikari-font-size-sm;
    color: var(--hi-color-text-secondary);

    &.hi-header-breadcrumb-active {
      color: var(--hi-color-text-primary);
    }

    &:not(:last-child)::after {
      content: '/';
      margin-left: 0.5rem;
      opacity: 0.5;
    }
  }
}