@use 'ui-design-system/src/styles/semantic/index' as tokens;

.ui-overlay-container {
  // Core Structure
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--overlay-z-index, tokens.$semantic-z-index-overlay);
  
  // Initial state (hidden)
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  
  // Transitions
  transition: opacity tokens.$semantic-motion-duration-fast tokens.$semantic-motion-easing-ease,
              visibility tokens.$semantic-motion-duration-fast tokens.$semantic-motion-easing-ease;

  // Visible state
  &--visible {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }

  // Animation states
  &--entering {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    
    .ui-overlay-container__content {
      animation: overlayEnter tokens.$semantic-motion-duration-fast tokens.$semantic-motion-easing-ease forwards;
    }
  }

  &--leaving {
    .ui-overlay-container__content {
      animation: overlayLeave tokens.$semantic-motion-duration-fast tokens.$semantic-motion-easing-ease forwards;
    }
  }

  // Position Variants
  &--top {
    align-items: flex-start;
    padding-top: tokens.$semantic-spacing-layout-md;
  }

  &--bottom {
    align-items: flex-end;
    padding-bottom: tokens.$semantic-spacing-layout-md;
  }

  &--left {
    justify-content: flex-start;
    padding-left: tokens.$semantic-spacing-layout-md;
  }

  &--right {
    justify-content: flex-end;
    padding-right: tokens.$semantic-spacing-layout-md;
  }

  &--top-left {
    align-items: flex-start;
    justify-content: flex-start;
    padding: tokens.$semantic-spacing-layout-md;
  }

  &--top-right {
    align-items: flex-start;
    justify-content: flex-end;
    padding: tokens.$semantic-spacing-layout-md;
  }

  &--bottom-left {
    align-items: flex-end;
    justify-content: flex-start;
    padding: tokens.$semantic-spacing-layout-md;
  }

  &--bottom-right {
    align-items: flex-end;
    justify-content: flex-end;
    padding: tokens.$semantic-spacing-layout-md;
  }

  // Size Variants
  &--sm .ui-overlay-container__content {
    max-width: tokens.$semantic-sizing-modal-width-sm;
    max-height: 50vh;
  }

  &--md .ui-overlay-container__content {
    max-width: tokens.$semantic-sizing-modal-width-md;
    max-height: 70vh;
  }

  &--lg .ui-overlay-container__content {
    max-width: tokens.$semantic-sizing-modal-width-lg;
    max-height: 80vh;
  }

  &--xl .ui-overlay-container__content {
    max-width: tokens.$semantic-sizing-modal-width-xl;
    max-height: 90vh;
  }

  &--fullscreen .ui-overlay-container__content {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
  }

  // Variant Styles
  &--modal {
    z-index: tokens.$semantic-z-index-modal;
    
    .ui-overlay-container__backdrop {
      background: tokens.$semantic-color-backdrop;
    }
  }

  &--popover {
    z-index: tokens.$semantic-z-index-popover;
    
    .ui-overlay-container__content {
      box-shadow: tokens.$semantic-shadow-popover;
    }
  }

  &--elevated {
    z-index: tokens.$semantic-z-index-elevated;
    
    .ui-overlay-container__content {
      box-shadow: tokens.$semantic-shadow-elevation-3;
    }
  }

  &--floating {
    z-index: tokens.$semantic-z-index-floating;
    
    .ui-overlay-container__content {
      box-shadow: tokens.$semantic-shadow-elevation-2;
    }
  }

  // Backdrop with blur effect
  &--backdrop-blur {
    backdrop-filter: blur(tokens.$semantic-glass-blur-md);
    -webkit-backdrop-filter: blur(tokens.$semantic-glass-blur-md);
  }

  // Backdrop Element
  &__backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: tokens.$semantic-color-backdrop;
    opacity: 0;
    transition: opacity tokens.$semantic-motion-duration-fast tokens.$semantic-motion-easing-ease;
    z-index: -1;

    &--visible {
      opacity: tokens.$semantic-opacity-backdrop;
    }

    &--entering {
      opacity: tokens.$semantic-opacity-backdrop;
    }

    &--leaving {
      opacity: 0;
    }

    &--blur {
      backdrop-filter: blur(tokens.$semantic-glass-blur-sm);
      -webkit-backdrop-filter: blur(tokens.$semantic-glass-blur-sm);
    }
  }

  // Content Element
  &__content {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    max-width: calc(100vw - #{tokens.$semantic-spacing-layout-lg});
    max-height: calc(100vh - #{tokens.$semantic-spacing-layout-lg});
    margin: tokens.$semantic-spacing-layout-sm;
    
    // Default styling
    background: tokens.$semantic-color-surface-primary;
    border: tokens.$semantic-border-card-width solid tokens.$semantic-color-border-primary;
    border-radius: tokens.$semantic-border-card-radius;
    box-shadow: tokens.$semantic-shadow-elevation-2;
    color: tokens.$semantic-color-text-primary;
    
    // Transform and scale for animations
    transform: scale(0.95) translateY(tokens.$semantic-spacing-component-md);
    opacity: 0;
    transition: transform tokens.$semantic-motion-duration-fast tokens.$semantic-motion-easing-ease,
                opacity tokens.$semantic-motion-duration-fast tokens.$semantic-motion-easing-ease;

    &--visible {
      transform: scale(1) translateY(0);
      opacity: 1;
    }

    &--entering {
      transform: scale(1) translateY(0);
      opacity: 1;
    }

    &--leaving {
      transform: scale(0.95) translateY(tokens.$semantic-spacing-component-md);
      opacity: 0;
    }

    // Offset positioning
    .ui-overlay-container:not(.ui-overlay-container--center) & {
      transform: translateX(var(--overlay-offset-x, 0)) translateY(var(--overlay-offset-y, 0));
    }
  }

  // Dark Mode Support
  :host-context(.dark-theme) & {
    .ui-overlay-container__content {
      background: tokens.$semantic-color-surface-primary;
      border-color: tokens.$semantic-color-border-primary;
      box-shadow: tokens.$semantic-shadow-elevation-2;
    }
  }

  // Responsive Design
  @media (max-width: tokens.$semantic-breakpoint-md - 1) {
    padding: tokens.$semantic-spacing-layout-sm;
    
    .ui-overlay-container__content {
      margin: tokens.$semantic-spacing-component-xs;
      max-width: calc(100vw - #{tokens.$semantic-spacing-layout-md});
      max-height: calc(100vh - #{tokens.$semantic-spacing-layout-md});
    }

    &--fullscreen .ui-overlay-container__content {
      border-radius: 0;
      margin: 0;
    }
  }

  @media (max-width: tokens.$semantic-breakpoint-sm - 1) {
    // Mobile adjustments
    &:not(.ui-overlay-container--fullscreen) {
      align-items: flex-end;
      
      .ui-overlay-container__content {
        width: 100%;
        max-width: none;
        margin: 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
      }
    }
  }
}

// Keyframe Animations
@keyframes overlayEnter {
  0% {
    transform: scale(0.95) translateY(tokens.$semantic-spacing-component-md);
    opacity: 0;
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

@keyframes overlayLeave {
  0% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
  100% {
    transform: scale(0.95) translateY(tokens.$semantic-spacing-component-md);
    opacity: 0;
  }
}

// Focus trap styling
.ui-overlay-container:focus-within {
  .ui-overlay-container__content {
    outline: none;
  }
}

// Reduced motion support
@media (prefers-reduced-motion: reduce) {
  .ui-overlay-container {
    transition: none;
    
    .ui-overlay-container__backdrop,
    .ui-overlay-container__content {
      transition: none;
      animation: none;
    }
  }
  
  @keyframes overlayEnter {
    0%, 100% {
      transform: scale(1) translateY(0);
      opacity: 1;
    }
  }
  
  @keyframes overlayLeave {
    0%, 100% {
      transform: scale(1) translateY(0);
      opacity: 0;
    }
  }
}