@import url('./cardBorders/image.css');
@import url('./cardBorders/silver.css');

.card-border {
  --card-border-radius: var(--squircle-sm);
  --card-border-content-clip: var(--runtime-card-border-clip, inset(0 round var(--card-border-radius)));
  position: relative;
  isolation: isolate;
  padding: var(--space-2xs);
  border: var(--line-width) solid transparent;
  border-radius: var(--card-border-radius);
}

.card-border::before {
  content: '';
  position: absolute;
  inset: calc(var(--line-width) * -1);
  z-index: -1;
  background: var(--color-gray-1);
  -webkit-mask: var(--runtime-card-border-fill-mask, linear-gradient(transparent, transparent)) center / 100% 100% no-repeat;
  mask: var(--runtime-card-border-fill-mask, linear-gradient(transparent, transparent)) center / 100% 100% no-repeat;
  pointer-events: none;
}

/* CSS owns layout; the mask only paints the existing squircle outline. */
.card-border::after {
  content: '';
  position: absolute;
  inset: calc(var(--line-width) * -1);
  background: linear-gradient(to bottom, var(--card-border-top-color, var(--card-border-color)), var(--card-border-color));
  -webkit-mask: var(--runtime-card-border-mask) center / 100% 100% no-repeat;
  mask: var(--runtime-card-border-mask) center / 100% 100% no-repeat;
  opacity: .72;
  pointer-events: none;
}