$mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 11.08V12a10 10 0 1 1-5.93-9.14'></path><polyline points='22 4 12 14.01 9 11.01'></polyline></svg>");

ol.is-style-check-circle,
ul.is-style-check-circle {
  list-style: none;

  ul, ol {
    list-style: none;
  }

  li {
    width: 100%;
    position: relative;
    line-height: 1.5;

    &::before {
      content: "";
      mask: $mask;
      -webkit-mask: $mask;
      width: 1.1em;
      height: 1.1em;
      display: inline-block !important;
      background: var(--wp--preset--color--primary-color);
      margin-left: -1.5em;
      margin-top: 0.2em;
      position: absolute;
    }
  }

  &.has-text-color li::before,
  .has-text-color li::before,
  .has-text-color::before {
    background: currentColor;
  }
}
