.ws-badge-layer {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    pointer-events: none;
    container-type: inline-size;
    z-index: 2;
}

.ws-badge {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: calc(var(--ws-badge-w, 30) * 1cqw);
    height: calc(var(--ws-badge-h, 9) * 1cqw);
    padding: 0 calc(var(--ws-badge-font, 4) * 0.4cqw);
    background-color: var(--ws-badge-bg, #5a5af0);
    color: var(--ws-badge-fg, #ffffff);
    font-size: calc(var(--ws-badge-font, 4) * 1cqw);
    line-height: 1.1;
    opacity: var(--ws-badge-opacity, 1);
    border-radius: calc(var(--ws-badge-radius, 0) * 1cqw);
    text-align: center;
    overflow: hidden;
}

.ws-badge__text {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ws-badge--bold { font-weight: 700; }
.ws-badge--upper { text-transform: uppercase; letter-spacing: 0.02em; }

/* --- anchors on the nine-point grid ------------------------------------------------------- */
.ws-badge--at-top-left     { top: calc(var(--ws-badge-y) * 1cqw); left: calc(var(--ws-badge-x) * 1cqw); }
.ws-badge--at-top-center   { top: calc(var(--ws-badge-y) * 1cqw); left: 50%; transform: translateX(-50%); }
.ws-badge--at-top-right    { top: calc(var(--ws-badge-y) * 1cqw); right: calc(var(--ws-badge-x) * 1cqw); }
.ws-badge--at-middle-left  { top: 50%; left: calc(var(--ws-badge-x) * 1cqw); transform: translateY(-50%); }
.ws-badge--at-center       { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.ws-badge--at-middle-right { top: 50%; right: calc(var(--ws-badge-x) * 1cqw); transform: translateY(-50%); }
.ws-badge--at-bottom-left  { bottom: calc(var(--ws-badge-y) * 1cqw); left: calc(var(--ws-badge-x) * 1cqw); }
.ws-badge--at-bottom-center{ bottom: calc(var(--ws-badge-y) * 1cqw); left: 50%; transform: translateX(-50%); }
.ws-badge--at-bottom-right { bottom: calc(var(--ws-badge-y) * 1cqw); right: calc(var(--ws-badge-x) * 1cqw); }

/* --- pill ---------------------------------------------------------------------------------- */
.ws-badge--pill { border-radius: 999px; }

.ws-badge--dotted .ws-badge__text::before {
    content: "";
    display: inline-block;
    width: 0.6em;
    height: 0.6em;
    margin-right: 0.45em;
    border-radius: 50%;
    background-color: var(--ws-badge-dot, #ffffff);
    vertical-align: middle;
}

/* --- flag: the far end is cut off at an angle ---------------------------------------------- */
.ws-badge--flag {
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--ws-badge-cut, 5) * 1cqw) 100%, 0 100%);
}
.ws-badge--flag.ws-badge--at-top-right,
.ws-badge--flag.ws-badge--at-middle-right,
.ws-badge--flag.ws-badge--at-bottom-right {
    clip-path: polygon(calc(var(--ws-badge-cut, 5) * 1cqw) 0, 100% 0, 100% 100%, 0 100%);
}

/* --- pennant: the far end is notched into an arrow ----------------------------------------- */
.ws-badge--pennant {
    clip-path: polygon(
        0 0,
        calc(100% - var(--ws-badge-cut, 5) * 1cqw) 0,
        100% 50%,
        calc(100% - var(--ws-badge-cut, 5) * 1cqw) 100%,
        0 100%
    );
}
.ws-badge--pennant.ws-badge--at-top-right,
.ws-badge--pennant.ws-badge--at-middle-right,
.ws-badge--pennant.ws-badge--at-bottom-right {
    clip-path: polygon(
        calc(var(--ws-badge-cut, 5) * 1cqw) 0,
        100% 0,
        100% 100%,
        calc(var(--ws-badge-cut, 5) * 1cqw) 100%,
        0 50%
    );
}

/* --- circle / square / shield -------------------------------------------------------------- */
.ws-badge--circle { border-radius: 50%; }
.ws-badge--shield {
    border-radius: 0 0 calc(var(--ws-badge-radius, 10) * 1cqw) calc(var(--ws-badge-radius, 10) * 1cqw);
}

/* --- full-width bar ------------------------------------------------------------------------ */
.ws-badge--bar {
    left: 0;
    right: 0;
    width: 100%;
    border-radius: 0;
    transform: none;
}

/* --- corner band: a diagonal strip laid across a corner ------------------------------------ */
.ws-badge--corner_band {
    transform-origin: 50% 50%;
    border-radius: 0;
}
.ws-badge--corner_band.ws-badge--corner-top-left {
    top: calc(var(--ws-badge-d, 12) * 1cqw);
    left: calc(var(--ws-badge-d, 12) * 1cqw);
    transform: translate(-50%, -50%) rotate(-45deg);
}
.ws-badge--corner_band.ws-badge--corner-top-right {
    top: calc(var(--ws-badge-d, 12) * 1cqw);
    right: calc(var(--ws-badge-d, 12) * 1cqw);
    transform: translate(50%, -50%) rotate(45deg);
}
.ws-badge--corner_band.ws-badge--corner-bottom-left {
    bottom: calc(var(--ws-badge-d, 12) * 1cqw);
    left: calc(var(--ws-badge-d, 12) * 1cqw);
    transform: translate(-50%, 50%) rotate(45deg);
}
.ws-badge--corner_band.ws-badge--corner-bottom-right {
    bottom: calc(var(--ws-badge-d, 12) * 1cqw);
    right: calc(var(--ws-badge-d, 12) * 1cqw);
    transform: translate(50%, 50%) rotate(-45deg);
}

/* --- corner triangle: a filled corner with the text along its diagonal ---------------------- */
.ws-badge--corner_triangle {
    padding: calc(var(--ws-badge-font, 4) * 0.4cqw);
    border-radius: 0;
}
.ws-badge--corner_triangle .ws-badge__text {
    transform-origin: 50% 50%;
}
.ws-badge--corner_triangle.ws-badge--corner-top-left {
    top: 0;
    left: 0;
    clip-path: polygon(0 0, 100% 0, 0 100%);
    align-items: flex-start;
    justify-content: flex-start;
}
.ws-badge--corner_triangle.ws-badge--corner-top-left .ws-badge__text {
    transform: rotate(-45deg);
}
.ws-badge--corner_triangle.ws-badge--corner-top-right {
    top: 0;
    right: 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    align-items: flex-start;
    justify-content: flex-end;
}
.ws-badge--corner_triangle.ws-badge--corner-top-right .ws-badge__text {
    transform: rotate(45deg);
}
.ws-badge--corner_triangle.ws-badge--corner-bottom-left {
    bottom: 0;
    left: 0;
    clip-path: polygon(0 0, 100% 100%, 0 100%);
    align-items: flex-end;
    justify-content: flex-start;
}
.ws-badge--corner_triangle.ws-badge--corner-bottom-left .ws-badge__text {
    transform: rotate(45deg);
}
.ws-badge--corner_triangle.ws-badge--corner-bottom-right {
    bottom: 0;
    right: 0;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    align-items: flex-end;
    justify-content: flex-end;
}
.ws-badge--corner_triangle.ws-badge--corner-bottom-right .ws-badge__text {
    transform: rotate(-45deg);
}

/* --- image badge --------------------------------------------------------------------------- */
.ws-badge--image {
    height: auto;
    padding: 0;
    background: none;
    overflow: visible;
}
.ws-badge--image .ws-badge__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: calc(var(--ws-badge-radius, 0) * 1cqw);
}