.wtps-tag {
    
    position: relative;
    width: fit-content;
    overflow: hidden;

    display: flex;
    flex-direction: row;
    gap: 0;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
        
    width: var(--tagsize);
    
    transform: scaleX(var(--tagflipx)) scaleY(var(--tagflipy));

    .wtps-tag-container {

        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        padding: var(--tagpadding);

        color: var(--tagcolor);
        background-color: var(--tagbackgroundcolor);
        
    }

    .wtps-tag-text {

        max-width: 100%;
        display: inline;

        font-size: var(--tagfontsize);
        font-family: var(--tagfontfamily);
        font-weight: var(--tagfontweight);
        text-transform: var(--tagtexttransform);
        text-decoration: var(--tagtextdecoration);
        letter-spacing: var(--tagletterspacing);
        line-height: var(--taglineheight);
        text-align: center;
        
        transform: scaleX(var(--tagflipx)) scaleY(var(--tagflipy));

    }

}

[data-variant="tag-square"] {
    height: var(--tagsize);
    .wtps-tag-container {
        height: 100%;
    }
}

[data-variant="tag-circle"] {
    height: var(--tagsize);
    border-radius: 50%;
    .wtps-tag-container {
        height: 100%;
    }
}

[data-variant="tag-star"] {
    height: var(--tagsize);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 22 21'%3E%3Cpath fill='%23D9D9D9' d='m10.937 0 2.582 7.946h8.355l-6.76 4.911 2.583 7.947-6.76-4.911-6.76 4.91 2.583-7.946L0 7.947h8.355L10.937 0Z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 22 21'%3E%3Cpath fill='%23D9D9D9' d='m10.937 0 2.582 7.946h8.355l-6.76 4.911 2.583 7.947-6.76-4.911-6.76 4.91 2.583-7.946L0 7.947h8.355L10.937 0Z'/%3E%3C/svg%3E") no-repeat center / contain;
    .wtps-tag-container {
        height: 100%;
    }
}

[data-variant="tag-arrow"] {
    align-items: stretch;
    .wtps-tag-container {
        padding-right: calc(var(--tagsize) * 0.1);
    }
    &::before {
        content: "";
        background-color: var(--tagbackgroundcolor);
        width: calc(var(--tagsize) * 0.2);
        display: flex;
        min-height: 100%;
        margin-right: -1px;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 8 14'%3E%3Cpath fill='%23D9D9D9' d='m0 7 4.041 7H8V0H4.041L0 7Z'/%3E%3C/svg%3E") no-repeat center / cover;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 8 14'%3E%3Cpath fill='%23D9D9D9' d='m0 7 4.041 7H8V0H4.041L0 7Z'/%3E%3C/svg%3E") no-repeat center / cover;
    }
}

[data-variant="tag-diagonal"] {
    align-items: stretch;
    .wtps-tag-container {
        padding-right: calc(var(--tagsize) * 0.1);
    }
    &::before {
        content: "";
        background-color: var(--tagbackgroundcolor);
        width: calc(var(--tagsize) * 0.2);
        display: flex;
        min-height: 100%;
        margin-right: -1px;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 8 14'%3E%3Cpath fill='%23D9D9D9' d='M0 14h8V0H4.041L0 14Z'/%3E%3C/svg%3E") no-repeat center / cover;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 8 14'%3E%3Cpath fill='%23D9D9D9' d='M0 14h8V0H4.041L0 14Z'/%3E%3C/svg%3E") no-repeat center / cover;
    }
}

[data-variant="tag-marquee"] {
    position: relative;
    aspect-ratio: 1;
    --tagtransform: calc(var(--tagsize) + var(--tagfontsize));
    .wtps-tag-container {
        position: absolute;
        width: calc(var(--tagsize) * 2);
        right: calc(var(--tagtransform) * 0.3);
        top: calc(var(--tagtransform) * 0.3);
        transform: translate(50%, -50%) rotate(45deg);
        transform-origin: center;
    }
    .wtps-tag-text {
        white-space: nowrap;
    }
}

[data-variant="tag-triangle"] {
    position: relative;
    aspect-ratio: 1;
    .wtps-tag-container {
        position: absolute;
        width: calc(var(--tagsize) + 16px);
        padding-inline: calc(var(--tagsize) * 0.75);
        padding-top: calc(var(--tagsize) * 0.5);
        right: var(--tagpadding);
        top: var(--tagpadding);
        transform: translate(50%, -50%) rotate(45deg);
        transform-origin: center;
    }
    .wtps-tag-text {
        white-space: nowrap;
    }
}

[data-variant="tag-flag"] {

    overflow: visible;
    --tagflaggies: 20px;
    
    .wtps-tag-container {
        position: relative;
        .before,
        .after {
            position: absolute;
            width: var(--tagflaggies);
            fill: var(--tagbackgroundcolor);
            filter: brightness(0.6);
        }
        .before {
            top: 100%;
            left: 0;
        }
        .after {
            top: calc(var(--tagflaggies) * -0.5);
            right: 0;
            transform: rotate(180deg);
        }
    }
}