.ws-image-mask--default {
  clip-path: none;
}

.ws-image-mask--diagonal {
  clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
}

.ws-image-mask--angled {
  clip-path: polygon(0 0, 100% 0, 84% 100%, 0 82%);
}

.ws-image-mask--stepped {
  clip-path: polygon(
    0 0,
    70% 0,
    70% 10%,
    80% 10%,
    80% 20%,
    90% 20%,
    90% 30%,
    100% 30%,
    100% 100%,
    30% 100%,
    30% 90%,
    20% 90%,
    20% 80%,
    10% 80%,
    10% 70%,
    0 70%
  );
}

.ws-image-mask--split {
  clip-path: polygon(
    0 0,
    100% 0,
    100% 42%,
    0 42%,
    0 52%,
    100% 52%,
    100% 100%,
    0 100%
  );
}

.ws-image-mask--vertical-slices {
  clip-path: polygon(
    0 0,
    13% 0,
    13% 100%,
    18% 100%,
    18% 0,
    33% 0,
    33% 100%,
    38% 100%,
    38% 0,
    53% 0,
    53% 100%,
    58% 100%,
    58% 0,
    73% 0,
    73% 100%,
    78% 100%,
    78% 0,
    100% 0,
    100% 100%,
    0 100%
  );
}

.ws-image-mask--stripes {
  clip-path: polygon(
    0 0,
    14% 0,
    24% 100%,
    10% 100%,
    20% 0,
    36% 0,
    46% 100%,
    32% 100%,
    42% 0,
    58% 0,
    68% 100%,
    54% 100%,
    64% 0,
    100% 0,
    100% 100%,
    82% 100%
  );
}

.ws-image-mask--hexagon {
  clip-path: polygon(24% 0, 76% 0, 100% 50%, 76% 100%, 24% 100%, 0 50%);
}

.ws-image-mask--layered {
  clip-path: polygon(
    0 0,
    100% 0,
    100% 70%,
    86% 70%,
    86% 82%,
    72% 82%,
    72% 94%,
    58% 94%,
    58% 100%,
    0 100%
  );
}

.ws-image-mask--floating {
  clip-path: polygon(4% 8%, 96% 0, 100% 88%, 10% 100%, 0 22%);
}

.ws-image-mask--cards {
  clip-path: polygon(0 0, 88% 0, 88% 12%, 100% 12%, 100% 100%, 0 100%);
}

.ws-image-mask--glass {
  clip-path: inset(0 round var(--ws-image-radius, 24px));
}

.ws-image-mask--reveal {
  clip-path: inset(0 0 0 0);
}

.ws-image-mask--staggered {
  clip-path: polygon(
    0 0,
    74% 0,
    74% 14%,
    84% 14%,
    84% 28%,
    94% 28%,
    94% 42%,
    100% 42%,
    100% 100%,
    0 100%
  );
}

.ws-image-mask--mosaic {
  clip-path: polygon(
    0 0,
    48% 0,
    48% 18%,
    100% 18%,
    100% 100%,
    52% 100%,
    52% 82%,
    0 82%
  );
}

.ws-image-mask--cinematic {
  clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
}

.ws-image-mask--editorial {
  clip-path: polygon(0 0, 92% 0, 100% 18%, 100% 100%, 8% 100%, 0 82%);
}

.ws-image-mask--zigzag {
  clip-path: polygon(
    0 0,
    85% 0,
    100% 12%,
    85% 24%,
    100% 36%,
    85% 48%,
    100% 60%,
    85% 72%,
    100% 84%,
    85% 100%,
    0 100%
  );
}

.ws-image-mask--wave {
  clip-path: ellipse(88% 58% at 50% 50%);
}

.ws-image-mask--asymmetric {
  clip-path: polygon(0 8%, 100% 0, 88% 100%, 12% 92%);
}

.ws-image-mask--radial {
  clip-path: circle(48% at 50% 50%);
}

.ws-image-mask--framed {
  clip-path: inset(6% round var(--ws-image-radius, 24px));
}

.ws-image-mask--stacked {
  clip-path: polygon(
    0 0,
    100% 0,
    100% 68%,
    92% 68%,
    92% 78%,
    84% 78%,
    84% 88%,
    76% 88%,
    76% 100%,
    0 100%
  );
}