// ==========================================================================
// GLASS EFFECT MIXINS
// ==========================================================================
// Comprehensive mixins for implementing glass morphism effects
// Includes animations, fallbacks, and responsive behavior
// ==========================================================================
@use '../../base/css-variables' as *;
@use '../../base/motion' as *;
@use '../../base/spacing' as *;
@use '../../base/glass' as *;
@use '../../base/breakpoints' as *;
@use '../../base/z-index' as *;

@use '../spacing' as *;
@use '../colors' as *;

@import 'glass-borders';

// CORE GLASS EFFECT MIXIN
// Primary mixin for applying glass morphism with full customization
@mixin glass-effect(
  $variant: 'medium',
  $blur: $css-glass-blur-md,
  $border: true,
  $shadow: true,
  $animate: false,
  $duration: var(--glass-duration-normal, 300ms)
) {
  // Background with dynamic opacity
  background: rgba($css-glass-background-base, var(--glass-opacity-#{$variant}));
  
  // Backdrop blur effect
  backdrop-filter: blur($blur);
  -webkit-backdrop-filter: blur($blur);
  
  // Optional border
  @if $border {
    border: $semantic-glass-border-width-thin solid $css-glass-border-color;
  }
  
  // Optional shadow
  @if $shadow {
    box-shadow: 
      0 4px 6px $css-glass-shadow-color,
      0 1px 3px rgba($css-glass-background-base, 0.1);
  }
  
  // Animation support
  @if $animate {
    transition: 
      background $duration $base-glass-easing-smooth,
      backdrop-filter $duration $base-glass-easing-smooth,
      border-color $duration $base-glass-easing-smooth,
      box-shadow $duration $base-glass-easing-smooth;
  }
  
  // Performance optimization
  will-change: backdrop-filter, background;
  
  // Fallback for browsers without backdrop-filter support
  @supports not (backdrop-filter: blur(1px)) {
    background: rgba($css-glass-background-base, calc(var(--glass-opacity-#{$variant}) + 0.15));
  }
}

// SIMPLIFIED GLASS VARIANTS
// Quick mixins for common glass effect intensities
@mixin glass-translucent($animate: false) {
  @include glass-effect('translucent', $css-glass-blur-sm, true, true, $animate);
}

@mixin glass-light($animate: false) {
  @include glass-effect('light', $css-glass-blur-md, true, true, $animate);
}

@mixin glass-medium($animate: false) {
  @include glass-effect('medium', $css-glass-blur-md, true, true, $animate);
}

@mixin glass-heavy($animate: false) {
  @include glass-effect('heavy', $css-glass-blur-lg, true, true, $animate);
}

@mixin glass-frosted($animate: false) {
  @include glass-effect('frosted', $css-glass-blur-xl, true, true, $animate);
}

// GLASS TRANSITION MIXIN
// Animates from one glass state to another
@mixin glass-transition(
  $from-variant: 'opaque', 
  $to-variant: 'medium', 
  $duration: var(--glass-duration-normal, 300ms),
  $trigger: 'hover'
) {
  // Initial state
  @if $from-variant == 'opaque' {
    background: rgb($css-glass-background-base);
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    border: $semantic-glass-border-width-thin solid transparent;
  } @else {
    @include glass-effect($from-variant, $css-glass-blur-md, true, true, false);
  }
  
  // Smooth transition properties
  transition: 
    background $duration $base-glass-easing-smooth,
    backdrop-filter $duration $base-glass-easing-smooth,
    border-color $duration $base-glass-easing-smooth,
    box-shadow $duration $base-glass-easing-smooth,
    transform $duration $base-glass-easing-smooth;
  
  // Target state based on trigger
  @if $trigger == 'hover' {
    &:hover {
      @include glass-effect($to-variant, $css-glass-blur-md, true, true, false);
      transform: translateY(-1px);
    }
  } @else if $trigger == 'focus' {
    &:focus,
    &:focus-within {
      @include glass-effect($to-variant, $css-glass-blur-md, true, true, false);
    }
  } @else if $trigger == 'active' {
    &.glass-active,
    &[data-glass-active="true"] {
      @include glass-effect($to-variant, $css-glass-blur-md, true, true, false);
    }
  }
}

// GLASS BORDER ENHANCEMENT MIXIN
// Adds subtle border highlights to enhance glass illusion
@mixin glass-border-enhance($style: 'subtle') {
  position: relative;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: $semantic-glass-border-highlight-top;
    border-radius: inherit;
  }
  
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: $semantic-glass-border-highlight-bottom;
    border-radius: inherit;
  }
}

// RESPONSIVE GLASS MIXIN
// Adjusts glass intensity based on screen size
@mixin glass-responsive($mobile-variant: 'light', $desktop-variant: 'medium') {
  @include glass-effect($mobile-variant);
  
  @media (min-width: $base-breakpoint-md) {
    @include glass-effect($desktop-variant);
  }
}

// GLASS COMPONENT MIXIN
// Complete glass component styling with all enhancements
@mixin glass-component(
  $variant: 'medium',
  $border-radius: $semantic-glass-border-radius-md,
  $padding: $semantic-spacing-component-md,
  $enhance-borders: true,
  $animate: true
) {
  @include glass-effect($variant, $css-glass-blur-md, true, true, $animate);
  
  border-radius: $border-radius;
  padding: $padding;
  
  @if $enhance-borders {
    @include glass-border-enhance();
  }
  
  // Ensure content is readable on glass background
  color: $semantic-color-text-primary;
  
  // Prevent content from interfering with glass effect
  isolation: isolate;
}

// UTILITY MIXIN FOR GLASS ANIMATIONS
@mixin glass-keyframes($name, $from-variant: 'opaque', $to-variant: 'medium') {
  @keyframes #{$name} {
    from {
      @if $from-variant == 'opaque' {
        background: rgb($css-glass-background-base);
        backdrop-filter: blur(0);
      } @else {
        background: rgba($css-glass-background-base, var(--glass-opacity-#{$from-variant}));
        backdrop-filter: blur($css-glass-blur-sm);
      }
    }
    
    to {
      background: rgba($css-glass-background-base, var(--glass-opacity-#{$to-variant}));
      backdrop-filter: blur($css-glass-blur-md);
    }
  }
}

// GLASS DISABLED STATE MIXIN
@mixin glass-disabled() {
  background: rgba($css-glass-background-base, calc($css-glass-opacity-light * 0.5));
  backdrop-filter: blur($css-glass-blur-xs);
  opacity: 0.6;
  cursor: not-allowed;
  
  &:hover {
    transform: none;
  }
}