/* @theme {
  --refraction: 5rem;
} */

@utility frosted-glass {
  @apply transition-scaffold-extended;
  position: relative;
  backdrop-filter: blur(var(--blur, 16px));
}

/* Use this as a sibling element in stack */
@utility frosted-glass-advanced {
  pointer-events: none;
  margin: calc(var(--refraction) * -1);
  padding: var(--refraction);

  /* Using position absolute is another way */
  /* position: absolute; */
  /* inset: calc(var(--refraction) * -1); */ /* z-index: -1; */
  /* width: calc(100% + var(--refraction) * 2); */
  /* height: calc(100% + var(--refraction) * 2); */
  border-radius: inherit;
  backdrop-filter: blur(16px);
  mask-image:
    linear-gradient(
      to bottom,
      transparent 0% var(--refraction),
      black var(--refraction) calc(100% - var(--refraction)),
      transparent calc(100% - var(--refraction)) 100%
    ),
    linear-gradient(
      to right,
      transparent 0% var(--refraction),
      black var(--refraction) calc(100% - var(--refraction)),
      transparent calc(100% - var(--refraction)) 100%
    );
  mask-composite: intersect;
}