.tinted-icon.svelte-14emh8i {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
    width: var(--icon-size);
    height: var(--icon-size);
    background: transparent;
  }

  .tinted-icon.svelte-14emh8i::after {
    content: '';
    display: block;
    width: var(--icon-size);
    height: var(--icon-size);
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--icon-color, var(--icon-paint)) 68%, white) 0%,
      var(--icon-color, var(--icon-paint)) 48%,
      color-mix(in srgb, var(--icon-color, var(--icon-paint)) 72%, black) 100%
    );
    mask: var(--icon-url) center / contain no-repeat;
    -webkit-mask: var(--icon-url) center / contain no-repeat;
    filter: drop-shadow(
      0 0 2.5px color-mix(in srgb, var(--icon-color, var(--icon-paint)) 50%, transparent)
    );
  }

  .tinted-icon.is-default.svelte-14emh8i::after {
    filter: none;
  }