/**
 * Modal component base styles.
 *
 * Shared foundation styles for the modal component.
 * Provides styling for the native <dialog> element, backdrop,
 * layout variants (default, drawer, alert), and sizing.
 */

@use '../styles/variables' as tokens;

@layer components {
  /* Core Dialog Element */
  .modal-dialog {
    /* Reset native dialog defaults */
    border: none;
    color: inherit;
    display: none; // native behavior handles display:block when open

    background-color: tokens.$modal-bg;
    border-radius: tokens.$modal-border-radius;
    box-shadow: tokens.$modal-shadow;
    padding: 0; // handled by internal slots

    // Default positioning/sizing (override in variants)
    margin: auto;
    width: 100%;
    max-width: tokens.$modal-max-width-md;
    max-height: 90vh;
    max-height: 90dvh;

    z-index: tokens.$modal-z-index;

    font-family: var(--vi-modal-font-family, #{tokens.$font-family-base});
    font-size: var(--vi-modal-font-size, #{tokens.$font-size-base});
    line-height: var(--vi-modal-line-height, #{tokens.$line-height-normal});
    color: #{tokens.$text-primary};

    &[open] {
      display: flex;
      flex-direction: column;
      animation: vi-modal-enter tokens.$modal-animation-duration ease-out;
    }

    &::backdrop {
      background-color: tokens.$modal-backdrop-bg;
      // Optional: add backdrop animation if desired in future
    }
  }

  /* Structural Areas */
  .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: tokens.$modal-header-padding;
    flex-shrink: 0;
  }

  /* Draggable Modal Header styles */
  .modal-dialog.is-draggable {
    .modal-header {
      cursor: move;
      user-select: none;
    }
  }

  .modal-title {
    font-size: tokens.$font-size-lg;
    font-weight: tokens.$font-weight-semibold;
    margin: 0;
  }

  .modal-header-actions {
    display: flex;
    align-items: center;
    gap: tokens.$spacing-xs;
  }

  .modal-body {
    padding: tokens.$modal-body-padding;
    // By default body stretches but can scroll if constrained by max-height
    flex-grow: 1;
    overflow-y: auto;
  }

  .modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: tokens.$spacing-sm;
    padding: tokens.$modal-footer-padding;
    background-color: tokens.$modal-footer-bg;
    border-top: 1px solid tokens.$modal-footer-border-color;
    flex-shrink: 0;
  }

  /* Variants */
  .modal-variant-drawer {
    margin: 0;
    max-height: none;
    height: 100vh;
    height: 100dvh; // modern viewport support
    max-width: none;
    width: tokens.$modal-drawer-width;
    border-radius: 0;

    &.placement-right {
      margin-left: auto;

      &[open] {
        animation: vi-modal-drawer-enter-right tokens.$modal-animation-duration ease-out;
      }
    }

    &.placement-left {
      margin-right: auto;

      &[open] {
        animation: vi-modal-drawer-enter-left tokens.$modal-animation-duration ease-out;
      }
    }
  }

  .modal-variant-alert {
    flex-direction: row; // icon alongside content
    padding: tokens.$modal-body-padding; // alerts might not use standard header/footer
    max-width: tokens.$modal-max-width-sm;

    // The alert content structure is slightly different
    .modal-alert-icon {
      flex-shrink: 0;
      margin-right: tokens.$spacing-md;
      display: flex;
      align-items: flex-start;
      padding-top: 2px; // align with text
    }

    .modal-alert-content {
      flex-grow: 1;
      display: flex;
      flex-direction: column;

      .modal-header {
        padding: 0;
        margin-bottom: tokens.$spacing-xs;
      }

      .modal-body {
        padding: 0;
        margin-bottom: tokens.$spacing-sm;
      }

      .modal-footer {
        padding: 0;
        background: transparent;
        border-top: none;
        margin-top: auto;
      }
    }

    &[open] {
      animation: vi-modal-alert-enter tokens.$modal-animation-duration cubic-bezier(0.175, 0.885, 0.32, 1.275); // spring-like
    }
  }

  /* Sizes (Default Variant Only) */
  .modal-size-xs { max-width: tokens.$modal-max-width-xs; }
  .modal-size-sm { max-width: tokens.$modal-max-width-sm; }
  .modal-size-md { max-width: tokens.$modal-max-width-md; }
  .modal-size-lg { max-width: tokens.$modal-max-width-lg; }
  .modal-size-xl { max-width: tokens.$modal-max-width-xl; }

  .modal-size-fullscreen {
    max-width: none;
    width: 100vw;
    width: 100dvw;
    max-height: none;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    margin: 0;
  }

  .modal-size-full-width {
    max-width: none;
    width: 100vw;
    width: 100dvw;
    border-radius: 0;
    margin-left: 0;
    margin-right: 0;
  }

  /* Scrollable constraint */
  .modal-scrollable-false .modal-body {
    overflow-y: visible; // Or hidden, depending on exact need. Usually it means the modal grows to fit content.
    // If dialog has no max-height, it just grows.
  }

  /* Animations */
  @keyframes vi-modal-enter {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
  }

  @keyframes vi-modal-drawer-enter-right {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
  }

  @keyframes vi-modal-drawer-enter-left {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
  }

  @keyframes vi-modal-alert-enter {
    from { opacity: 0; transform: scale(0.8); }
    to   { opacity: 1; transform: scale(1); }
  }

  /* Reduced Motion */
  @media (prefers-reduced-motion: reduce) {
    .modal-dialog[open] {
      animation: none !important;
    }
  }

  /* Responsive Behavior (Mobile) */
  @media (max-width: #{tokens.$breakpoint-sm - 1px}) {
    .modal-dialog:not(.modal-variant-drawer) {
      max-width: 100vw !important;
      width: 100vw !important;
      width: 100dvw !important;
      max-height: 100vh !important;
      max-height: 100dvh !important;
      height: 100vh !important;
      height: 100dvh !important;
      border-radius: 0 !important;
      margin: 0 !important;
      transform: none !important; // Prevent dragging from offsetting it off-screen
    }

    .modal-header {
      padding: tokens.$spacing-md; // slightly tighter padding on mobile
    }
    
    .modal-body {
      padding: tokens.$spacing-md;
    }

    .modal-footer {
      padding: tokens.$spacing-md;
    }
  }
}