@layer components {
  .dm-fun-snowflake {
    position: absolute;
    width: var(--snowflake-size, 10px);
    height: var(--snowflake-size, 10px);
    border-radius: 50%;
    pointer-events: none;
    
    &:not(.snowflake-unicode) {
      background: var(--snowflake-color, #FFFFFF);
      filter: drop-shadow(0 0 var(--snowflake-size, 10px) var(--snowflake-color, #FFFFFF));
    }
  }

  .dm-fun-snowflake.snowflake-unicode::after {
    content: "\2746";
    color: var(--snowflake-color, #FFFFFF);
    font-size: var(--snowflake-size, 10px);
    filter: drop-shadow(0 0 var(--snowflake-size, 10px) var(--snowflake-color, #FFFFFF));
  }
}