/* @layer components {
    .flash-message {
      @apply fixed top-4 right-4 z-50 w-full max-w-sm rounded-md border p-4 pr-6 shadow-lg transition-all text-sm items-start gap-3 overflow-hidden;
      @apply bg-[--flash-bg] text-[--flash-text] border-[--flash-border];
      @apply opacity-0 translate-y-4;
      
    }
  
    .flash-icon {
      @apply h-5 w-5 text-[--flash-icon] flex-shrink-0;
      background-color: currentColor;
      mask-image: var(--flash-icon-url);
      -webkit-mask-image: var(--flash-icon-url);
      mask-repeat: no-repeat;
      -webkit-mask-repeat: no-repeat;
      mask-size: contain;
      -webkit-mask-size: contain;
    }
  
    .flash-dismiss-button {
      @apply absolute right-2 top-2 rounded-md p-1 text-[--flash-text] hover:text-foreground focus:outline-none focus:ring-2 focus:ring-[--flash-border] focus:ring-offset-2 focus:ring-offset-[--flash-bg];
    }
  
    .flash-message.notice {
      --flash-bg: oklch(98.2% 0.018 155.826);
      --flash-text: oklch(44.8% 0.119 151.328);
      --flash-border: oklch(92.5% 0.084 155.995);
      --flash-icon: oklch(44.8% 0.119 151.328);
      --flash-icon-url: url("/assets/icons/check-circle.svg");
    }
  
    .flash-message.error,
    .flash-message.alert {
      --flash-bg: oklch(97.1% 0.013 17.38);
      --flash-text: oklch(44.4% 0.177 26.899);
      --flash-border: oklch(88.5% 0.062 18.334);
      --flash-icon: oklch(44.4% 0.177 26.899);
      --flash-icon-url: url("/assets/icons/x-circle.svg");
    }
  
    .flash-message.warning {
      --flash-bg: oklch(98.7% 0.026 102.212);
      --flash-text: oklch(47.6% 0.114 61.907);
      --flash-border: oklch(94.5% 0.129 101.54);
      --flash-icon: oklch(47.6% 0.114 61.907);
      --flash-icon-url: url("/assets/icons/alert-triangle.svg");
    }
  
    .flash-message.info {
      --flash-bg: oklch(97% 0.014 254.604);
      --flash-text: oklch(42.4% 0.199 265.638);
      --flash-border: oklch(88.2% 0.059 254.128);
      --flash-icon: oklch(42.4% 0.199 265.638);
      --flash-icon-url: url("/assets/icons/info.svg");
    }
  } */