hikari-components 0.1.8

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

// ============================================
// Hikari Toast Component - Emphasis Style
// Features: Solid accent color backgrounds, white text
// Distinct from Alert component (which uses surface background)
// ============================================

// ============================================
// Toast Container
// ============================================

.hi-toast-container {
  position: fixed;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  pointer-events: none;

  // Top-right (default)
  &.hi-toast-top-right {
    top: 1rem;
    right: 1rem;
  }

  // Top-left
  &.hi-toast-top-left {
    top: 1rem;
    left: 1rem;
  }

  // Bottom-right
  &.hi-toast-bottom-right {
    bottom: 1rem;
    right: 1rem;
  }

  // Bottom-left
  &.hi-toast-bottom-left {
    bottom: 1rem;
    left: 1rem;
  }

  // Top-center
  &.hi-toast-top-center {
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
  }

  // Bottom-center
  &.hi-toast-bottom-center {
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
  }
}

// ============================================
// Base Toast Styles - Emphasis color background
// No static shadow - glow handled by GlowWrapper
// ============================================

.hi-toast {
  // Layout
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;

  // Spacing
  padding: 1rem 1.25rem;
  min-width: 320px;
  max-width: 480px;

  // Appearance - rounded corners, no border
  border-radius: vars.$hikari-radius-fui-md;
  border: none;

  // Default background (will be overridden by variants)
  background: var(--hi-color-primary);

  // No static shadow - glow effect handled by GlowWrapper

  // Position for progress bar
  position: relative;
  overflow: hidden;

  // Enable pointer events
  pointer-events: auto;

  // Icon - always white
  .hi-toast-icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.125rem;
    color: var(--hi-color-white-100);

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

  // Content
  .hi-toast-content {
    flex: 1;
    min-width: 0;
  }

  // Title - always white
  .hi-toast-title {
    margin: 0 0 0.25rem 0;
    font-family: vars.$hikari-font-family-sans;
    font-size: vars.$hikari-font-size-sm;
    font-weight: 600;
    color: var(--hi-color-white-100);
    line-height: 1.4;
  }

  // Message - always white with slight transparency
  .hi-toast-message {
    margin: 0;
    font-family: vars.$hikari-font-family-sans;
    font-size: vars.$hikari-font-size-sm;
    font-weight: 400;
    color: var(--hi-color-white-90);
    line-height: 1.5;
  }

  // Close button - always white (layer2 toast style), simple icon button
  .hi-toast-close {
    flex-shrink: 0;
    align-self: flex-start;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    padding: 0.125rem;
    background: transparent;
    border: none;
    color: var(--hi-color-white-100);
    cursor: pointer;
    border-radius: vars.$hikari-radius-fui-sm;

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

// ============================================
// Progress Bar - white/transparent (using palette)
// ============================================

.hi-toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--hi-color-white-20);
  overflow: hidden;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--hi-color-white-50);
  }
}

// ============================================
// Color Variants - Solid accent color backgrounds
// All use white text for consistency
// No static glow - dynamic glow handled by GlowWrapper
// ============================================

// Success (Green) - 葱倩
.hi-toast-success {
  background: var(--hi-color-success);
}

// Info (Blue) - 魁卵青
.hi-toast-info {
  background: var(--hi-color-info);
}

// Warning (Yellow) - 鹅黄 (use darker variant for white text readability)
.hi-toast-warning {
  background: var(--hi-button-warning-dark);
}

// Error (Red) - 朱红
.hi-toast-error {
  background: var(--hi-color-danger);
}

// Loading (Blue with spinner)
.hi-toast-loading {
  background: var(--hi-color-info);

  .hi-toast-icon {
    svg {
      animation: toast-spin 1s linear infinite;
    }
  }
}

@keyframes toast-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

// ============================================
// Hover State - no static effects, glow handled by wrapper
// ============================================

.hi-toast {
  &:hover {
    // Pause progress animation on hover
    .hi-toast-progress {
      &::after {
        animation-play-state: paused;
      }
    }
  }
}

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

.hi-toast-sm {
  padding: 0.75rem 1rem;
  min-width: 280px;

  .hi-toast-icon {
    width: 1rem;
    height: 1rem;
  }

  .hi-toast-title {
    font-size: 0.875rem;
  }

  .hi-toast-message {
    font-size: 0.75rem;
  }
}

.hi-toast-md {
  padding: 1rem 1.25rem;
  min-width: 320px;
}

.hi-toast-lg {
  padding: 1.25rem 1.5rem;
  min-width: 400px;

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

  .hi-toast-title {
    font-size: 1rem;
  }

  .hi-toast-message {
    font-size: 0.9375rem;
  }
}

// ============================================
// Clickable Toast
// ============================================

.hi-toast-clickable {
  cursor: pointer;

  &:hover {
    transform: translateY(-1px);
  }
}