.ws-image-overlay--none::after {
  display: none;
}

.ws-image-overlay--dark::after {
  background: color-mix(in srgb, CanvasText 48%, transparent);
}

.ws-image-overlay--gradient::after,
.ws-image-overlay--gradient-dark::after {
  background: linear-gradient(
    to right,
    color-mix(in srgb, CanvasText 58%, transparent),
    transparent
  );
}

.ws-image-overlay--blur::after {
  backdrop-filter: blur(12px);
  background: color-mix(in srgb, Canvas 18%, transparent);
}

.ws-image-overlay--glass::after {
  backdrop-filter: blur(18px);
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, Canvas 16%, transparent),
    color-mix(in srgb, Canvas 4%, transparent)
  );
}

.ws-image-overlay--mesh::after {
  background:
    radial-gradient(circle at 20% 20%, color-mix(in srgb, currentColor 18%, transparent), transparent 30%),
    radial-gradient(circle at 80% 30%, color-mix(in srgb, CanvasText 14%, transparent), transparent 28%),
    linear-gradient(to bottom, transparent, color-mix(in srgb, CanvasText 18%, transparent));
}

.ws-image-overlay--tint::after {
  background: color-mix(in srgb, currentColor 22%, transparent);
}

.ws-image-overlay--duotone {
  filter: grayscale(1) contrast(1.1);
}

.ws-image-overlay--duotone::after {
  background: color-mix(in srgb, currentColor 35%, transparent);
  mix-blend-mode: overlay;
}

.ws-image-overlay--noise::before {
  opacity: 0.14;
  background-image:
    radial-gradient(circle at 1px 1px, currentColor 1px, transparent 0);
  background-size: 12px 12px;
  mix-blend-mode: soft-light;
}

.ws-image-overlay--spotlight::after {
  background: radial-gradient(
    circle at 50% 40%,
    transparent 0 28%,
    color-mix(in srgb, CanvasText 48%, transparent) 72%
  );
}