hikari-components 0.2.2

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

// ============================================
// Hikari Modal Component -  Styling
// Three-layer CSS variable system:
// - Layer1: Foundation variables (foundation.scss)
// - Layer2: Component variables (modal-vars.scss)
// - Custom: Runtime overrides via AnimationBuilder
// ============================================

// ============================================
// Modal Overlay
// ============================================

.hi-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--hi-modal-z-index);

  // Acrylic background effect - use CSS variables
  background: var(--hi-modal-overlay-bg);
  backdrop-filter: var(--hi-modal-overlay-blur);

  // Flex center
  display: flex;
  align-items: center;
  justify-content: center;

  // Transitions - use CSS variables
  transition: var(--hi-modal-transition);
}

// Transparent mode (non-blocking modal, like toast)
.hi-modal-overlay.hi-modal-overlay-transparent {
  background: transparent;
  backdrop-filter: none;
  pointer-events: none;

  .hi-modal {
    pointer-events: auto;
  }
}

// ============================================
// Modal Container
// ============================================

.hi-modal {
  position: relative;

  // Layout
  display: flex;
  flex-direction: column;

  // Appearance - use CSS variables
  border-radius: var(--hi-modal-radius);
  border: var(--hi-modal-border-width) var(--hi-modal-border-style) var(--hi-modal-border-color);

  // Acrylic background effect - use CSS variables
  background: var(--hi-modal-bg);
  backdrop-filter: var(--hi-modal-blur);

  // Elevated shadow with glow - use CSS variables
  box-shadow: var(--hi-modal-shadow);

  // Transitions - use CSS variables
  transition: var(--hi-modal-transition);
  max-height: var(--hi-modal-max-height);

  // Size variants - use CSS variables
  &.hi-modal-sm {
    width: var(--hi-modal-width);
    max-width: var(--hi-modal-max-width);
  }

  &.hi-modal-md {
    width: var(--hi-modal-width);
    max-width: var(--hi-modal-max-width);
  }

  &.hi-modal-lg {
    width: var(--hi-modal-width);
    max-width: var(--hi-modal-max-width);
  }

  &.hi-modal-xl {
    width: var(--hi-modal-width);
    max-width: var(--hi-modal-max-width);
  }

  // Position variants
  &.hi-modal-top {
    margin-top: 4rem;
  }

  // ============================================
  // Modal Header
  // ============================================

  .hi-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hi-modal-gap);
    padding: var(--hi-modal-padding-header);
    border-bottom: 1px solid var(--hi-modal-divider-color);
    background: var(--hi-modal-bg-header);
  }

  .hi-modal-title {
    margin: 0;
    font-family: vars.$hikari-font-family-sans;
    font-size: var(--hi-modal-title-font-size);
    font-weight: var(--hi-modal-title-font-weight);
    color: var(--hi-modal-title-color);
    line-height: 1.4;
  }

  .hi-modal-close {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0.25rem;
    background: transparent;
    border: none;
    color: var(--hi-modal-close-color);
    cursor: pointer;
    border-radius: var(--hi-radius-sm);
    transition: all vars.$hikari-duration-fast vars.$hikari-ease-smooth;

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

    &:hover {
      color: var(--hi-modal-close-color-hover);
      background: var(--hi-modal-bg-close-hover);
      box-shadow: var(--hi-glow-button-danger);
    }

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

  // ============================================
  // Modal Body
  // ============================================

  .hi-modal-body {
    flex: 1;
    padding: var(--hi-modal-padding-body);
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    color: var(--hi-modal-body-color);
    font-size: var(--hi-modal-body-font-size);
    line-height: var(--hi-modal-body-line-height);

    // Custom scrollbar
    &::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }

    &::-webkit-scrollbar-track {
      background: var(--hi-color-black-10);
      border-radius: 4px;
    }

    &::-webkit-scrollbar-thumb {
      background: var(--hi-modal-border-color);
      border-radius: 4px;
      transition: background vars.$hikari-duration-fast vars.$hikari-ease-smooth;
    }

    &::-webkit-scrollbar-thumb:hover {
      background: var(--hi-color-primary);
    }
  }

  // ============================================
  // Modal Footer
  // ============================================

  .hi-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--hi-modal-gap);
    padding: var(--hi-modal-padding-footer);
    border-top: 1px solid var(--hi-modal-divider-color);
    background: var(--hi-modal-bg-footer);
  }
}

// ============================================
// Responsive
// ============================================

@media (max-width: 768px) {
  .hi-modal {
    &.hi-modal-sm,
    &.hi-modal-md,
    &.hi-modal-lg,
    &.hi-modal-xl {
      width: 100%;
      max-width: none;
      margin: 0;
      border-radius: 0;
      max-height: 100vh;
    }

    &.hi-modal-top {
      margin-top: 0;
    }

    .hi-modal-header {
      padding: 1rem;
    }

    .hi-modal-body {
      padding: 1rem;
    }

    .hi-modal-footer {
      padding: 0.75rem 1rem;
    }
  }

  .hi-modal-overlay {
    padding: 0;
  }
}

// ============================================
// Focus Styles
// ============================================

.hi-modal-close:focus-visible {
  outline: 2px solid var(--hi-color-primary);
  outline-offset: 2px;
}