@use 'variables' as *;

// Glass morphism effect
@mixin glass-morphism($opacity: 0.1, $blur: 16px) {
  background: rgba(255, 255, 255, $opacity);
  backdrop-filter: blur($blur);
  -webkit-backdrop-filter: blur($blur);
  border: 1px solid rgba(255, 255, 255, $opacity * 1.5);
}

// Dark glass morphism
@mixin glass-morphism-dark($opacity: 0.15, $blur: 16px) {
  background: rgba(15, 23, 42, $opacity);
  backdrop-filter: blur($blur);
  -webkit-backdrop-filter: blur($blur);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

// Colored shadow for cards
@mixin colored-shadow($color: $primary, $intensity: 0.25) {
  box-shadow: 0 10px 25px -5px rgba($color, $intensity);
}

// Skeleton pulse animation
@mixin skeleton-pulse {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0.05) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease infinite;
  border-radius: $radius-md;
}

// Striped table rows
@mixin striped-table {
  tbody tr:nth-child(even) {
    background: rgba(var(--v-theme-on-surface), 0.02);
  }
}

// Responsive breakpoints
@mixin mobile {
  @media (max-width: 599px) { @content; }
}

@mixin tablet {
  @media (min-width: 600px) and (max-width: 1279px) { @content; }
}

@mixin desktop {
  @media (min-width: 1280px) { @content; }
}
