/* Gradient / multi stroke: fill (padding-box) + stroke (border-box).
   Hollow (transparent) fills use ::before + mask-composite instead of
   background-blend-mode: destination-out (not a valid blend-mode — browsers
   ignore it and leave an opaque black punch).
   !important beats Tailwind Browser CDN utilities that would otherwise replace
   background-image with a single gradient and undo the border ring.
   Prefer state/bp vars in background-image — never reassign inline --bg-img*.
   Single source — imported by globals, site, and canvas stylesheets. */
.slyate-paint-stroke-clip:not(.slyate-paint-stroke-hollow) {
  background-image: var(--bg-img), var(--paint-stroke) !important;
  background-clip: padding-box, border-box !important;
  -webkit-background-clip: padding-box, border-box !important;
  background-origin: border-box !important;
}
.slyate-paint-stroke-clip:not(.slyate-paint-stroke-hollow):hover {
  background-image: var(--bg-img-hover, var(--bg-img)), var(--paint-stroke-hover, var(--paint-stroke)) !important;
}
.slyate-paint-stroke-clip:not(.slyate-paint-stroke-hollow):focus-visible {
  background-image: var(--bg-img-focus, var(--bg-img)), var(--paint-stroke-focus, var(--paint-stroke)) !important;
}

/* Transparent fill: gradient ring only (content stays visible above ::before). */
.slyate-paint-stroke-hollow {
  position: relative;
  isolation: isolate;
  background-image: none !important;
}
.slyate-paint-stroke-hollow::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-sizing: border-box;
  padding: var(--paint-stroke-width, 1px);
  background: var(--paint-stroke);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.slyate-paint-stroke-hollow:hover::before {
  background: var(--paint-stroke-hover, var(--paint-stroke));
}
.slyate-paint-stroke-hollow:focus-visible::before {
  background: var(--paint-stroke-focus, var(--paint-stroke));
}

@media (max-width: 1023px) {
  .slyate-paint-stroke-clip:not(.slyate-paint-stroke-hollow) {
    background-image: var(--bg-img-tablet, var(--bg-img)), var(--paint-stroke-tablet, var(--paint-stroke)) !important;
  }
  .slyate-paint-stroke-clip:not(.slyate-paint-stroke-hollow):hover {
    background-image: var(--bg-img-tablet-hover, var(--bg-img-hover, var(--bg-img-tablet, var(--bg-img)))),
      var(--paint-stroke-tablet-hover, var(--paint-stroke-hover, var(--paint-stroke-tablet, var(--paint-stroke)))) !important;
  }
  .slyate-paint-stroke-clip:not(.slyate-paint-stroke-hollow):focus-visible {
    background-image: var(--bg-img-tablet-focus, var(--bg-img-focus, var(--bg-img-tablet, var(--bg-img)))),
      var(--paint-stroke-tablet-focus, var(--paint-stroke-focus, var(--paint-stroke-tablet, var(--paint-stroke)))) !important;
  }
  .slyate-paint-stroke-hollow::before {
    background: var(--paint-stroke-tablet, var(--paint-stroke));
  }
  .slyate-paint-stroke-hollow:hover::before {
    background: var(--paint-stroke-tablet-hover, var(--paint-stroke-hover, var(--paint-stroke-tablet, var(--paint-stroke))));
  }
  .slyate-paint-stroke-hollow:focus-visible::before {
    background: var(--paint-stroke-tablet-focus, var(--paint-stroke-focus, var(--paint-stroke-tablet, var(--paint-stroke))));
  }
}
@media (max-width: 767px) {
  .slyate-paint-stroke-clip:not(.slyate-paint-stroke-hollow) {
    background-image: var(--bg-img-mobile, var(--bg-img-tablet, var(--bg-img))),
      var(--paint-stroke-mobile, var(--paint-stroke-tablet, var(--paint-stroke))) !important;
  }
  .slyate-paint-stroke-clip:not(.slyate-paint-stroke-hollow):hover {
    background-image: var(--bg-img-mobile-hover, var(--bg-img-tablet-hover, var(--bg-img-hover, var(--bg-img-mobile, var(--bg-img-tablet, var(--bg-img)))))),
      var(--paint-stroke-mobile-hover, var(--paint-stroke-tablet-hover, var(--paint-stroke-hover, var(--paint-stroke-mobile, var(--paint-stroke-tablet, var(--paint-stroke)))))) !important;
  }
  .slyate-paint-stroke-clip:not(.slyate-paint-stroke-hollow):focus-visible {
    background-image: var(--bg-img-mobile-focus, var(--bg-img-tablet-focus, var(--bg-img-focus, var(--bg-img-mobile, var(--bg-img-tablet, var(--bg-img)))))),
      var(--paint-stroke-mobile-focus, var(--paint-stroke-tablet-focus, var(--paint-stroke-focus, var(--paint-stroke-mobile, var(--paint-stroke-tablet, var(--paint-stroke)))))) !important;
  }
  .slyate-paint-stroke-hollow::before {
    background: var(--paint-stroke-mobile, var(--paint-stroke-tablet, var(--paint-stroke)));
  }
  .slyate-paint-stroke-hollow:hover::before {
    background: var(--paint-stroke-mobile-hover, var(--paint-stroke-tablet-hover, var(--paint-stroke-hover, var(--paint-stroke-mobile, var(--paint-stroke-tablet, var(--paint-stroke))))));
  }
  .slyate-paint-stroke-hollow:focus-visible::before {
    background: var(--paint-stroke-mobile-focus, var(--paint-stroke-tablet-focus, var(--paint-stroke-focus, var(--paint-stroke-mobile, var(--paint-stroke-tablet, var(--paint-stroke))))));
  }
}