.ribbon-corner,
.ribbon-bookmark-v,
.ribbon-bookmark-h {
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
}
@-moz-document url-prefix() {
    .ribbon-corner,
    .ribbon-bookmark-v,
    .ribbon-bookmark-h {
        outline: 1px solid transparent;
    }
}
.ribbon-corner {
    background-color: #1f44ff;
    color: #fff;
    position: absolute;
    top: 0;
    right: 0;
    -webkit-clip-path: var(--tor-ribbon-polygon);
    clip-path: var(--tor-ribbon-polygon);
    transform: rotate(var(--tor-ribbon-rotate)) translateY(var(--tor-ribbon-translateY)) translateX(var(--tor-ribbon-translateX)) !important;
    transform-origin: var(--tor-ribbon-origin) !important;
    width: calc((var(--tor-ribbon-size) + 1em) * 2);
    height: 2em;
}
.ribbon-corner {
    --tor-ribbon-size: 3em;
    --tor-ribbon-rotate: 45deg;
    --tor-ribbon-translateX: 50%;
    --tor-ribbon-translateY: calc((var(--tor-ribbon-size) + 1em) - 100%);
    --tor-ribbon-origin: 100% 0%;
    --tor-ribbon-polygon: polygon(0% 100%, 50% calc(100% - (var(--tor-ribbon-size) + 1em)), 100% 100%);
}
.ribbon-corner[data-tor*="place.left"][data-tor*="place.top"] {
    --tor-ribbon-rotate: -45deg;
    --tor-ribbon-translateX: -50%;
    --tor-ribbon-origin: 0% 0%;
}
.ribbon-corner[data-tor*="place.left"][data-tor*="place.bottom"] {
    --tor-ribbon-translateX: -50%;
    --tor-ribbon-translateY: calc(0% - var(--tor-ribbon-size) + 1em);
    --tor-ribbon-origin: 0% 100%;
    --tor-ribbon-polygon: polygon(0% 0%, 50% calc(100% + (var(--tor-ribbon-size) - 1em)), 100% 0%);
}
.ribbon-corner[data-tor*="place.right"][data-tor*="place.bottom"] {
    --tor-ribbon-rotate: -45deg;
    --tor-ribbon-translateY: calc(0% - var(--tor-ribbon-size) + 1em);
    --tor-ribbon-origin: 100% 100%;
    --tor-ribbon-polygon: polygon(0% 0%, 50% calc(100% + (var(--tor-ribbon-size) - 1em)), 100% 0%);
}
.ribbon-corner.ribbon-fold {
    --tor-ribbon-polygon: polygon(0% 100%, 50% calc(100% - (var(--tor-ribbon-size) + 1em)), 100% 100%, 100% calc(100% + 0.5em), 0% calc(100% + 0.5em));
    margin: -0.34em;
}
.ribbon-corner.ribbon-fold:before {
    --tor-ribbon-fold-polygon: polygon(0% -10px, 100% -10px, 100% 100%, calc(100% - 0.5em - 10px) -10px, calc(0.5em + 10px) -10px, 0% 100%);
    background-color: inherit;
    filter: brightness(50%);
    -webkit-clip-path: var(--tor-ribbon-fold-polygon);
    clip-path: var(--tor-ribbon-fold-polygon);
    content: "";
    position: absolute;
    bottom: calc(-0.5em + 1px);
    left: 0;
    width: 100%;
    height: 0.5em;
    z-index: -1;
}
.ribbon-corner.ribbon-fold[data-tor*="place.bottom"] {
    --tor-ribbon-polygon: polygon(0% -0.5em, 100% -0.5em, 100% 0%, 50% calc(100% + (var(--tor-ribbon-size) - 1em)), 0% 0%);
}
.ribbon-corner.ribbon-fold[data-tor*="place.bottom"]:before {
    bottom: auto;
    top: -0.5em;
    transform: rotate(180deg);
}
.ribbon-bookmark-v,
.ribbon-bookmark-h {
    --tor-ribbon-size: 3em;
    color: #fff;
    background-color: #1f44ff;
    position: absolute;
    right: 0;
    top: 0;
    flex-direction: column;
    transform-style: preserve-3d;
    z-index: 1;
}
.ribbon-bookmark-v.ribbon-fold:before,
.ribbon-bookmark-h.ribbon-fold:before {
    content: "";
    position: absolute;
    z-index: -1;
    background-color: inherit;
    filter: brightness(50%);
    padding: 0.25em;
}
.ribbon-bookmark-v {
    --tor-ribbon-polygon: polygon(0% 0%, 100% 0%, 100% 100%, 1em calc(100% - 1em), 0% 100%);
    -webkit-clip-path: var(--tor-ribbon-polygon);
    clip-path: var(--tor-ribbon-polygon);
    margin-right: 1rem;
    margin-left: 1rem;
    width: 2em;
    height: calc(var(--tor-ribbon-size) + 1em);
    padding-bottom: 1em;
}
.ribbon-bookmark-v.ribbon-fold {
    --tor-ribbon-polygon: polygon(0% calc(0% + 0.5em), -0.5em 0.5em, 0% 0%, 100% 0%, 100% 100%, 1em calc(100% - 1em), 0% 100%);
    margin-top: -0.5em;
    margin-bottom: -0.5em;
}
.ribbon-bookmark-v.ribbon-fold::before {
    top: 0;
    left: -0.5em;
}
.ribbon-bookmark-v[data-tor*="place.bottom"] {
    --tor-ribbon-polygon: polygon(0% 0%, 1em 1em, 100% 0%, 100% 100%, 0% 100%);
    padding-bottom: unset;
    padding-top: 1em;
}
.ribbon-bookmark-v.ribbon-fold[data-tor*="place.bottom"] {
    --tor-ribbon-polygon: polygon(0% 0%, 1em 1em, 100% 0%, 100% 100%, 0% 100%, -0.5em calc(100% - 0.5em), 0% calc(100% - 0.5em));
}
.ribbon-bookmark-v.ribbon-fold[data-tor*="place.bottom"]::before {
    bottom: 0;
    left: -0.5em;
    top: auto;
}
.ribbon-bookmark-h {
    --tor-ribbon-polygon: polygon(100% 100%, 0% 100%, 1em 1em, 0% 0%, 100% 0%);
    -webkit-clip-path: var(--tor-ribbon-polygon);
    clip-path: var(--tor-ribbon-polygon);
    margin-bottom: 1rem;
    margin-top: 1rem;
    height: 2em;
    width: calc(var(--tor-ribbon-size) + 1em);
    padding-left: 1em;
}
.ribbon-bookmark-h.ribbon-fold {
    --tor-ribbon-polygon: polygon(100% 100%, 0% 100%, 1em 1em, 0% 0%, calc(100% - 0.5em) 0%, calc(100% - 0.5em) -0.5em, 100% 0%);
    margin-left: -0.5em;
    margin-right: -0.5em;
}
.ribbon-bookmark-h.ribbon-fold::before {
    top: -0.5em;
    right: 0;
}
.ribbon-bookmark-h[data-tor*="place.left"] {
    --tor-ribbon-polygon: polygon(0% 0%, 100% 0%, calc(100% - 1em) 1em, 100% 100%, 0% 100%);
    padding-right: 1em;
    padding-left: unset;
}
.ribbon-bookmark-h.ribbon-fold[data-tor*="place.left"] {
    --tor-ribbon-polygon: polygon(0% 0%, 0.5em -0.5em, 0.5em 0%, 100% 0%, calc(100% - 1em) 1em, 100% 100%, 0% 100%, 0% 0%);
}
.ribbon-bookmark-h.ribbon-fold[data-tor*="place.left"]::before {
    left: 0;
    right: auto;
}
.ribbon-sm {
    --tor-ribbon-size: 2em;
}
.ribbon-lg {
    --tor-ribbon-size: 4em;
}
.ribbon-xl {
    --tor-ribbon-size: 5em;
}