// Base styles for ui-backgrounds library

// Import animations
@import 'animations';

// Base background component styles
.ui-background {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  // Ensure proper layering
  z-index: 0;
  
  &--fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
  }
}

// Type-specific styles
.ui-background--solid {
  background-image: none;
}

.ui-background--gradient {
  // Base gradient styles
  &.ui-background--linear-gradient {
    background-size: 200% 200%;
  }
  
  &.ui-background--radial-gradient {
    background-size: 200% 200%;
  }
  
  &.ui-background--conic-gradient {
    background-size: 200% 200%;
  }
}

.ui-background--pattern {
  background-repeat: repeat;
  
  &.ui-background--pattern-dots {
    // Dots pattern specific styles
  }
  
  &.ui-background--pattern-grid {
    // Grid pattern specific styles
  }
  
  &.ui-background--pattern-stripes {
    // Stripes pattern specific styles
  }
  
  &.ui-background--pattern-diagonal-stripes {
    // Diagonal stripes pattern specific styles
  }
  
  &.ui-background--pattern-chevron {
    // Chevron pattern specific styles
  }
  
  &.ui-background--pattern-waves {
    background-repeat: repeat-x;
  }
  
  &.ui-background--pattern-hexagon {
    // Hexagon pattern specific styles
  }
  
  &.ui-background--pattern-triangles {
    // Triangles pattern specific styles
  }
  
  &.ui-background--pattern-checkerboard {
    // Checkerboard pattern specific styles
  }
  
  &.ui-background--pattern-circles {
    // Circles pattern specific styles
  }
  
  &.ui-background--pattern-crosshatch {
    // Crosshatch pattern specific styles
  }
  
  &.ui-background--pattern-polka-dots {
    // Polka dots pattern specific styles
  }
}

.ui-background--image {
  // Image background specific styles
}

.ui-background--animated {
  // Base animation styles
  background-size: 200% 200%;
  
  // Apply default animation
  animation: ui-background-animation 5s ease-in-out infinite;
  
  // Respect reduced motion preferences
  @media (prefers-reduced-motion: reduce) {
    animation: none;
  }
}

.ui-background--mesh {
  background-size: 400% 400%;
  animation: ui-mesh-animation 15s ease infinite;
  
  @media (prefers-reduced-motion: reduce) {
    animation: none;
  }
}

.ui-background--noise {
  // Noise background specific styles
}

.ui-background--glass {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); // Safari support
  
  // Fallback for browsers that don't support backdrop-filter
  @supports not (backdrop-filter: blur()) {
    background-color: rgba(255, 255, 255, 0.8);
  }
}

// Responsive behavior
@media (max-width: 768px) {
  .ui-background--animated,
  .ui-background--mesh {
    // Disable complex animations on mobile for performance
    @media (prefers-reduced-motion: no-preference) {
      animation-duration: 10s; // Slower animations
    }
  }
}

// High contrast mode support
@media (prefers-contrast: high) {
  .ui-background {
    filter: contrast(1.2);
  }
  
  .ui-background--glass {
    backdrop-filter: none;
    background-color: rgba(255, 255, 255, 0.95);
  }
}

// Print styles
@media print {
  .ui-background {
    background: none !important;
    backdrop-filter: none !important;
    animation: none !important;
  }
  
  .ui-background--fullscreen {
    display: none !important;
  }
}

// Dark mode considerations
@media (prefers-color-scheme: dark) {
  .ui-background--glass {
    background-color: rgba(0, 0, 0, 0.3);
  }
}