ui-essentials/projects/shared-ui/src/styles/semantic/glass/_glass-utilities.scss

// ==========================================================================
// GLASS UTILITY CLASSES
// ==========================================================================
// Ready-to-use utility classes for rapid prototyping with glass effects
// Can be applied directly in HTML or used as @extend placeholders
// ==========================================================================

@use '../../base/css-variables' as *;
@use '../../base/motion' as *;
@use '../../base/spacing' as *;
@use '../../base/glass' as *;
@use '../../base/glass' as *;
@use '../../base/breakpoints' as *;
@use '../../base/z-index' as *;

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

// CORE GLASS UTILITY CLASSES
// Basic glass effect classes for each variant
.glass-translucent {
  @include glass-translucent();
}

.glass-light {
  @include glass-light();
}

.glass-medium {
  @include glass-medium();
}

.glass-heavy {
  @include glass-heavy();
}

.glass-frosted {
  @include glass-frosted();
}

// ANIMATED GLASS UTILITIES
// Glass effects with built-in animations
.glass-translucent-animated {
  @include glass-translucent(true);
}

.glass-light-animated {
  @include glass-light(true);
}

.glass-medium-animated {
  @include glass-medium(true);
}

.glass-heavy-animated {
  @include glass-heavy(true);
}

.glass-frosted-animated {
  @include glass-frosted(true);
}

// TRANSITION UTILITIES
// Classes for animating to glass effects on interaction
.glass-on-hover {
  @include glass-transition('opaque', 'medium', var(--glass-duration-normal), 'hover');
}

.glass-on-focus {
  @include glass-transition('opaque', 'light', var(--glass-duration-normal), 'focus');
}

.glass-on-active {
  @include glass-transition('opaque', 'heavy', var(--glass-duration-normal), 'active');
}

// SPECIFIC TRANSITION VARIANTS
@each $variant in (translucent, light, medium, heavy, frosted) {
  .glass-hover-to-#{$variant} {
    @include glass-transition('opaque', $variant, var(--glass-duration-normal), 'hover');
  }
  
  .glass-focus-to-#{$variant} {
    @include glass-transition('opaque', $variant, var(--glass-duration-normal), 'focus');
  }
  
  .glass-active-to-#{$variant} {
    @include glass-transition('opaque', $variant, var(--glass-duration-normal), 'active');
  }
}

// COMPONENT-SPECIFIC UTILITIES
// Pre-configured glass effects for common components
.glass-card {
  @include glass-component('medium', $semantic-glass-border-radius-lg);
}

.glass-modal {
  @include glass-component('heavy', $semantic-glass-border-radius-xl);
}

.glass-dropdown {
  @include glass-component('frosted', $semantic-glass-border-radius-md, $semantic-spacing-component-sm);
}

.glass-tooltip {
  @include glass-component('light', $semantic-glass-border-radius-sm, $semantic-spacing-component-xs);
}

.glass-navbar {
  @include glass-component('frosted', 0, $semantic-spacing-component-md, false);
}

.glass-button {
  @include glass-component('light', $semantic-glass-border-radius-md, $semantic-spacing-component-sm);
  @include glass-transition('light', 'medium', var(--glass-duration-fast), 'hover');
  
  &:active {
    @include glass-effect('heavy', $css-glass-blur-lg, true, true, false);
    transform: translateY(0);
  }
}

// BLUR-ONLY UTILITIES
// For cases where you only want the blur effect without the glass background
.blur-xs {
  backdrop-filter: blur($css-glass-blur-xs);
  -webkit-backdrop-filter: blur($css-glass-blur-xs);
}

.blur-sm {
  backdrop-filter: blur($css-glass-blur-sm);
  -webkit-backdrop-filter: blur($css-glass-blur-sm);
}

.blur-md {
  backdrop-filter: blur($css-glass-blur-md);
  -webkit-backdrop-filter: blur($css-glass-blur-md);
}

.blur-lg {
  backdrop-filter: blur($css-glass-blur-lg);
  -webkit-backdrop-filter: blur($css-glass-blur-lg);
}

.blur-xl {
  backdrop-filter: blur($css-glass-blur-xl);
  -webkit-backdrop-filter: blur($css-glass-blur-xl);
}

// GLASS STATE MODIFIERS
// Utility classes for different states
.glass-disabled {
  @include glass-disabled();
}

.glass-interactive {
  cursor: pointer;
  
  &:hover {
    transform: translateY(-2px);
  }
  
  &:active {
    transform: translateY(0);
  }
}

// RESPONSIVE GLASS UTILITIES
.glass-responsive {
  @include glass-responsive('light', 'medium');
}

.glass-responsive-heavy {
  @include glass-responsive('medium', 'heavy');
}

// GLASS OVERLAY UTILITIES
.glass-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: $base-z-index-overlay;
  @include glass-effect('translucent', $css-glass-blur-lg);
}

.glass-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: $base-z-index-modal-backdrop;
  background: rgba($css-glass-background-base, calc($css-glass-opacity-translucent * 0.5));
  backdrop-filter: blur($css-glass-blur-md);
  -webkit-backdrop-filter: blur($css-glass-blur-md);
}

// GLASS ANIMATION CLASSES
// For JavaScript-triggered animations
.glass-fade-in {
  animation: glassEffectFadeIn var(--glass-duration-normal) $base-glass-easing-smooth forwards;
}

.glass-fade-out {
  animation: glassEffectFadeOut var(--glass-duration-normal) $base-glass-easing-smooth forwards;
}

// KEYFRAME ANIMATIONS
@keyframes glassEffectFadeIn {
  from {
    background: transparent;
    backdrop-filter: blur(0);
    opacity: 0;
  }
  to {
    background: rgba($css-glass-background-base, $css-glass-opacity-medium);
    backdrop-filter: blur($css-glass-blur-md);
    opacity: 1;
  }
}

@keyframes glassEffectFadeOut {
  from {
    background: rgba($css-glass-background-base, $css-glass-opacity-medium);
    backdrop-filter: blur($css-glass-blur-md);
    opacity: 1;
  }
  to {
    background: transparent;
    backdrop-filter: blur(0);
    opacity: 0;
  }
}