@property --badge-ribbon-a{syntax:"<angle>";inherits:true;initial-value:0deg}.badge-ribbon{--c:#e57824;--r:.8em;--badge-ribbon-a:0deg;--d:.5em;margin:calc(.5lh + var(--r)) calc(1.2lh + var(--d));color:#fff;white-space:nowrap;background:var(--c);padding-inline:.65em;line-height:1.75;transition:--badge-ribbon-a .6s;display:inline-block;position:relative}.badge-ribbon:hover{--badge-ribbon-a:var(--badge-ribbon-hover-a,60deg)}.badge-ribbon--static:hover{--badge-ribbon-a:0deg}.badge-ribbon:before,.badge-ribbon:after{content:"";box-sizing:border-box;width:calc(1lh + var(--d));height:calc(1.5lh + var(--r));border:solid var(--c);rotate:calc(var(--badge-ribbon-a) - 90deg);position:absolute}.badge-ribbon:before{clip-path:polygon(calc(999px * cos(var(--badge-ribbon-a))) calc(1lh + var(--d) - 999px * sin(var(--badge-ribbon-a))), 999px 100%, 100% 100%, calc(50% + var(--d) / 2) calc(100% - var(--r)), var(--d) 100%, 0 100%, 0 calc(1lh + var(--d)));transform-origin:0 calc(1lh + var(--d));border-width:1lh 1lh 0 0;border-radius:0 999px 0 0;top:0;left:99%}.badge-ribbon:after{clip-path:polygon(calc(100% - 999px * cos(var(--badge-ribbon-a))) calc(100% - 1lh - var(--d) + 999px * sin(var(--badge-ribbon-a))), -999px 0, 0 0, calc(50% - var(--d) / 2) var(--r), calc(100% - var(--d)) 0, 100% 0, 100% calc(100% - 1lh - var(--d)));transform-origin:100% calc(100% - 1lh - var(--d));border-width:0 0 1lh 1lh;border-radius:0 0 0 999px;bottom:0;right:99%}.badge-ribbon--inline{margin:calc(.35lh + var(--r)) calc(.85lh + var(--d))}.badge-ribbon--flush{margin:0}.badge-ribbon__inner{z-index:1;align-items:center;gap:.35em;display:inline-flex;position:relative}@media (prefers-reduced-motion:reduce){.badge-ribbon{transition:none}.badge-ribbon:hover{--badge-ribbon-a:0deg}}