.wtps-decoration {
    pointer-events: none;
    position: absolute;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 0;
    right: 0;
    overflow: hidden;
}

.wtps-decoration-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(180deg);
}

.wtps-decoration[data-position="top"] {
    top: -1px;
}

.wtps-decoration[data-position="bottom"] {
    bottom: -1px;
}

.wtps-decoration[data-position="top"] .wtps-decoration-wrapper {
    width: var(--decotopwidth, 100%);
}

.wtps-decoration[data-position="bottom"] .wtps-decoration-wrapper {
    width: var(--decobottomwidth, 100%);
}

.wtps-decoration[data-position="top"] svg {
    transform: rotateX(0deg) rotateY(0deg);
    color: var(--decotopcolor);
    height: var(--decotopheight);
    width: var(--decotopwidth);
}

.wtps-decoration[data-position="bottom"] svg {
    transform: rotateX(180deg) rotateY(0deg);
    color: var(--decobottomcolor);
    height: var(--decobottomheight);
    width: var(--decobottomwidth);
}

.wtps-decoration[data-position="top"][data-flip="true"] svg {
    transform: rotateX(0deg) rotateY(180deg);
}

.wtps-decoration[data-position="bottom"][data-flip="true"] svg {
    transform: rotateX(180deg) rotateY(180deg);
}

.wtps-decoration[data-overlap="true"] {
    z-index: 1;
}

.wtps-decoration path {
    fill: currentColor;
}