/**
 * Custom icons that extend the local Phosphor set.
 * Usage: <i class="ph ph-watermelon"></i>
 *
 * Sized like font glyphs: host is 1em×1em, mask fills the box (same optical
 * size as native Phosphor at any font-size).
 */

.ph.ph-watermelon,
.ph-bold.ph-watermelon,
.ph-fill.ph-watermelon {
  font-family: inherit !important;
  speak: never;
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  font-weight: normal !important;
  -webkit-font-smoothing: antialiased;
}

.ph.ph-watermelon::before,
.ph-bold.ph-watermelon::before,
.ph-fill.ph-watermelon::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: currentColor;
  -webkit-mask: url("./custom/watermelon.svg") no-repeat center / 100% 100%;
  mask: url("./custom/watermelon.svg") no-repeat center / 100% 100%;
}