:root{--sticker-rotate:0deg;--sticker-p:20px;--sticker-peelback-hover:30%;--sticker-peelback-active:45%;--sticker-start:calc(-1 * var(--sticker-p));--sticker-end:calc(100% + var(--sticker-p));--sticker-shadow-opacity:.5;--sticker-lighting-constant:.1;--peel-direction:0deg}.sticker-container{transform:rotate(var(--peel-direction));transform-origin:50%;position:relative;overflow:visible!important}.sticker-container *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.sticker-main{clip-path:polygon(var(--sticker-start) var(--sticker-start), var(--sticker-end) var(--sticker-start), var(--sticker-end) var(--sticker-end), var(--sticker-start) var(--sticker-end));filter:url(#dropShadow);transition:clip-path .25s cubic-bezier(.2,.8,.2,1)}.sticker-main>*{transform:rotate(calc(-1 * var(--peel-direction)))}.sticker-lighting{filter:url(#pointLight)}.sticker-container:hover .sticker-main,.sticker-container.touch-active .sticker-main{clip-path:polygon(var(--sticker-start) var(--sticker-peelback-hover), var(--sticker-end) var(--sticker-peelback-hover), var(--sticker-end) var(--sticker-end), var(--sticker-start) var(--sticker-end))}.sticker-container:active .sticker-main{clip-path:polygon(var(--sticker-start) var(--sticker-peelback-active), var(--sticker-end) var(--sticker-peelback-active), var(--sticker-end) var(--sticker-end), var(--sticker-start) var(--sticker-end))}.sticker-image{transform:rotate(var(--sticker-rotate))}.flap{width:100%;height:100%;left:0;top:calc(-100% - var(--sticker-p) * 2);clip-path:polygon(var(--sticker-start) var(--sticker-start), var(--sticker-end) var(--sticker-start), var(--sticker-end) var(--sticker-start), var(--sticker-start) var(--sticker-start));pointer-events:none;transition:clip-path .25s cubic-bezier(.2,.8,.2,1),top .25s cubic-bezier(.2,.8,.2,1);position:absolute;transform:scaleY(-1)}.flap>*{transform:rotate(calc(-1 * var(--peel-direction)))}.sticker-container:hover .flap,.sticker-container.touch-active .flap{clip-path:polygon(var(--sticker-start) var(--sticker-start), var(--sticker-end) var(--sticker-start), var(--sticker-end) var(--sticker-peelback-hover), var(--sticker-start) var(--sticker-peelback-hover));top:calc(-100% + 2 * var(--sticker-peelback-hover) - 1px)}.sticker-container:active .flap{clip-path:polygon(var(--sticker-start) var(--sticker-start), var(--sticker-end) var(--sticker-start), var(--sticker-end) var(--sticker-peelback-active), var(--sticker-start) var(--sticker-peelback-active));top:calc(-100% + 2 * var(--sticker-peelback-active) - 1px)}.flap-lighting{filter:url(#pointLightFlipped)}.flap-image{transform:rotate(var(--sticker-rotate));filter:url(#expandAndFill)}.draggable{cursor:grab;justify-content:center;align-items:center;margin:0 auto;transform:translateZ(0);display:flex!important;position:relative!important;overflow:visible!important}.draggable:active{cursor:grabbing}@media (hover:none) and (pointer:coarse){.draggable{cursor:default}.sticker-container{touch-action:none}}.sticker-image,.flap-image{width:var(--sticker-width,200px);object-fit:contain;height:auto;display:block}.sticker-main,.flap{will-change:clip-path, top}
