.beveled-frame{position:relative;height:100%;transition:transform .25s ease,filter .25s ease;--corner-outer: 18px;--outer-thickness: 3px;--frame-gap: 6px;--inner-thickness: 3px;--corner-content: calc( var(--corner-outer) - var(--outer-thickness) - var(--frame-gap) - var(--inner-thickness) );padding:var(--outer-thickness);background:transparent}.beveled-frame:before{content:"";height:100%;width:100%;position:absolute;top:0;left:0;z-index:0;background:transparent;padding:0;clip-path:polygon(var(--corner-outer) 0%,calc(100% - var(--corner-outer)) 0%,100% var(--corner-outer),100% calc(100% - var(--corner-outer)),calc(100% - var(--corner-outer)) 100%,var(--corner-outer) 100%,0% calc(100% - var(--corner-outer)),0% var(--corner-outer))}.beveled-frame__inner{position:relative;height:100%;display:flex;flex-direction:column;--corner: calc(var(--corner-outer) - var(--outer-thickness) - var(--frame-gap));margin:var(--frame-gap);padding:var(--inner-thickness)}.beveled-frame__inner:before{content:"";height:100%;width:100%;position:absolute;top:0;left:0;z-index:0;background:transparent;padding:0;clip-path:polygon(var(--corner) 0%,calc(100% - var(--corner)) 0%,100% var(--corner),100% calc(100% - var(--corner)),calc(100% - var(--corner)) 100%,var(--corner) 100%,0% calc(100% - var(--corner)),0% var(--corner))}.beveled-frame__overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.beveled-frame__svg{width:100%;height:100%;display:block}.beveled-frame__svg .frame-outer{stroke:color-mix(in srgb,var(--frame-outer-color, #d4af37) var(--frame-outer-opacity, 55%),transparent);stroke-width:var(--outer-thickness);stroke-linejoin:bevel}.beveled-frame__svg .frame-inner{stroke:color-mix(in srgb,var(--frame-inner-color, #d4af37) var(--frame-inner-opacity, 45%),transparent);stroke-width:var(--inner-thickness);stroke-linejoin:bevel}.beveled-frame__content{position:relative;height:100%;background:var(--card-custom-background, transparent);z-index:1;display:flex;flex-direction:column;overflow:hidden;clip-path:polygon(calc(var(--corner-content) + var(--inner-thickness)) 0%,calc(100% - var(--corner-content) - var(--inner-thickness)) 0%,100% calc(var(--corner-content) + var(--inner-thickness)),100% calc(100% - var(--corner-content) - var(--inner-thickness)),calc(100% - var(--corner-content) - var(--inner-thickness)) 100%,calc(var(--corner-content) + var(--inner-thickness)) 100%,0% calc(100% - var(--corner-content) - var(--inner-thickness)),0% calc(var(--corner-content) + var(--inner-thickness)))}.beveled-frame:hover{filter:drop-shadow(0 0 var(--hover-glow-radius, 0px) var(--hover-glow-color, transparent));transform:scale(var(--hover-scale, 1))}@media (hover: none){.beveled-frame:hover{filter:none;transform:none}}
/*# sourceMappingURL=/cdn/shop/t/6/assets/beveled-frame.css.map */