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

.ui-backdrop {
  // Core Structure
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--backdrop-z-index, 1000);
  
  // Visual Design
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  
  // Transitions
  transition: opacity $semantic-motion-duration-normal $semantic-motion-easing-ease;
  
  // Pointer Events
  pointer-events: none;
  
  // Backdrop Variants
  &--default {
    background: rgba(0, 0, 0, 0.5);
  }
  
  &--blur {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  
  &--dark {
    background: rgba(0, 0, 0, 0.6);
  }
  
  &--light {
    background: rgba(255, 255, 255, 0.6);
  }
  
  // State Variants
  &--visible {
    pointer-events: auto;
    opacity: var(--backdrop-opacity, 0.5);
  }
  
  &--clickable {
    cursor: pointer;
    
    &:hover {
      opacity: calc(var(--backdrop-opacity, 0.5) + 0.05);
    }
    
    &:active {
      opacity: calc(var(--backdrop-opacity, 0.5) + 0.1);
    }
  }
  
  // Animation States
  &--entering {
    opacity: 0;
    animation: backdrop-fade-in $semantic-motion-duration-normal $semantic-motion-easing-ease forwards;
  }
  
  &--leaving {
    opacity: var(--backdrop-opacity, 0.5);
    animation: backdrop-fade-out $semantic-motion-duration-normal $semantic-motion-easing-ease forwards;
  }
  
  // Content Positioning
  &__content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: $semantic-spacing-layout-md;
  }
  
  // Dark Mode Support
  :host-context(.dark-theme) & {
    &--default {
      background: rgba(0, 0, 0, 0.7);
    }
    
    &--light {
      background: rgba(255, 255, 255, 0.1);
    }
  }
  
  // High Contrast Mode
  @media (prefers-contrast: high) {
    &--default {
      background: rgba(0, 0, 0, 0.8);
    }
    
    &--light {
      background: rgba(255, 255, 255, 0.8);
    }
  }
  
  // Reduced Motion Support
  @media (prefers-reduced-motion: reduce) {
    transition: none;
    animation: none;
    
    &--entering,
    &--leaving {
      animation: none;
    }
  }
  
  // Responsive Design
  @media (max-width: 768px - 1) {
    &__content {
      padding: $semantic-spacing-layout-sm;
    }
  }
  
  @media (max-width: 576px - 1) {
    &__content {
      padding: $semantic-spacing-layout-xs;
    }
  }
}

// Keyframe Animations
@keyframes backdrop-fade-in {
  from {
    opacity: 0;
  }
  
  to {
    opacity: var(--backdrop-opacity, 0.5);
  }
}

@keyframes backdrop-fade-out {
  from {
    opacity: var(--backdrop-opacity, 0.5);
  }
  
  to {
    opacity: 0;
  }
}

// Z-index Management Utilities
.ui-backdrop {
  // Common z-index levels
  &--z-index-modal {
    z-index: 1050;
  }
  
  &--z-index-drawer {
    z-index: 1040;
  }
  
  &--z-index-popover {
    z-index: 1030;
  }
  
  &--z-index-tooltip {
    z-index: 1020;
  }
}