/* Mica Material Effect - Microsoft Fluent Design System
 * Based on: https://github.com/yell0wsuit/acrylic-mica-css
 *
 * Usage: Apply these classes to any element for a clean, frosted glass effect
 * Available strengths: subtle, light, medium (default), strong, extreme
 */

/* Base Mica styles - shared properties */
.mica-subtle,
.mica-light,
.mica,
.mica-medium,
.mica-strong,
.mica-extreme {
  position: relative;
  isolation: isolate;
  /* border: 1px solid #e1e6ea; */
  box-shadow: 0px 0px 5.6px rgba(0, 0, 0, 0.14);
  /* 0px 0px 16.4px rgba(0, 0, 0, 0.12); */
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

/* Dark mode base styles */
.dark .mica-subtle,
.dark .mica-light,
.dark .mica,
.dark .mica-medium,
.dark .mica-strong,
.dark .mica-extreme {
  border-color: rgba(45, 45, 45, 0.102);
}

/* Mica Subtle - Most transparent, lightest blur */
.mica-subtle {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background-color: rgba(247, 249, 252, 0.7); /* 70% opacity */
}

.dark .mica-subtle {
  background-color: rgba(31, 31, 31, 0.815);
}

/* Mica Light */
.mica-light {
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  background-color: rgba(247, 249, 252, 0.78); /* 78% opacity */
}

.dark .mica-light {
  background-color: rgba(32, 32, 32, 0.78);
}

/* Mica Medium (Default) - Microsoft's standard implementation */
.mica,
.mica-medium {
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  background-color: rgba(247, 249, 252, 0.859); /* 86% opacity - #f7f9fcdb */
}

.dark .mica,
.dark .mica-medium {
  background-color: rgba(15, 15, 15, 0.418); /* #232734db */
}

/* Mica Strong - More opaque, heavier blur */
.mica-strong {
  backdrop-filter: blur(60px);
  -webkit-backdrop-filter: blur(60px);
  background-color: rgba(247, 249, 252, 0.92); /* 92% opacity */
}

.dark .mica-strong {
  background-color: rgba(35, 39, 52, 0.92);
}

/* Mica Extreme - Most opaque, heaviest blur */
.mica-extreme {
  backdrop-filter: blur(80px);
  -webkit-backdrop-filter: blur(80px);
  background-color: rgba(247, 249, 252, 0.97); /* 97% opacity */
}

.dark .mica-extreme {
  background-color: rgba(35, 39, 52, 0.97);
}

/* Interactive states - can be extended with modifiers */
/* .mica-subtle:hover,
.mica-light:hover,
.mica:hover,
.mica-medium:hover,
.mica-strong:hover,
.mica-extreme:hover {
  background-color: rgba(247, 249, 252, 0.9);
} */

.dark .mica-light:hover,
.dark .mica:hover,
.dark .mica-medium:hover,
.dark .mica-strong:hover,
.dark .mica-extreme:hover {
  background-color: rgba(15, 15, 15, 0.45);
}

.dark .mica-subtle:hover {
  background-color: rgb(31, 31, 31);
}
/* Ensure content stays on top of the effect */
.mica-subtle > *,
.mica-light > *,
.mica > *,
.mica-medium > *,
.mica-strong > *,
.mica-extreme > * {
  position: relative;
  z-index: 1;
}
