@property --badge-ribbon-a{syntax:"<angle>";initial-value:0deg;inherits:true}.badge-ribbon{--c:#e57824;--r:0.8em;--badge-ribbon-a:0deg;--d:0.5em;position:relative;display:inline-block;margin:calc(.5lh + var(--r)) calc(1.2lh + var(--d));padding-inline:.65em;line-height:1.75;color:#fff;white-space:nowrap;background:var(--c);transition:--badge-ribbon-a .6s}.badge-ribbon:hover{--badge-ribbon-a:var(--badge-ribbon-hover-a,60deg)}.badge-ribbon--static:hover{--badge-ribbon-a:0deg}.badge-ribbon:after,.badge-ribbon:before{content:"";position:absolute;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)}.badge-ribbon:before{top:0;left:99%;border-width:1lh 1lh 0 0;border-radius:0 999px 0 0;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))}.badge-ribbon:after{right:99%;bottom:0;border-width:0 0 1lh 1lh;border-radius:0 0 0 999px;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))}.badge-ribbon--inline{margin:calc(.35lh + var(--r)) calc(.85lh + var(--d))}.badge-ribbon--flush{margin:0}.badge-ribbon__inner{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.35em}@media (prefers-reduced-motion:reduce){.badge-ribbon{transition:none}.badge-ribbon:hover{--badge-ribbon-a:0deg}}