@layer components {
  .sticker {
    display: inline-block;
    flex-shrink: 0;
    width: var(--sticker-md);
    height: var(--sticker-md);
    overflow: visible;
    vertical-align: middle;
    color: var(--sticker-color);
    fill: var(--sticker-shine);
    stroke: var(--sticker-outline);
    stroke-width: 1.5;
    stroke-linejoin: round;
    stroke-linecap: round;
  }

  .sticker--sm {
    width: var(--sticker-sm);
    height: var(--sticker-sm);
  }

  .sticker--lg {
    width: var(--sticker-lg);
    height: var(--sticker-lg);
  }

  .sticker--star {
    --sticker-color: var(--color-focus);
  }

  .sticker--heart {
    --sticker-color: var(--color-accent);
  }

  .sticker--butterfly {
    --sticker-color: var(--color-accent-2);
  }

  .sticker--sparkle {
    --sticker-color: var(--color-accent-3);
  }
}