1import{__decorate as t}from"../node_modules/tslib/tslib.es6.js";import{css as e,LitElement as i,html as o}from"https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js";import{property as r,customElement as s}from"https://cdn.skypack.dev/pin/lit@v2.5.0-jYRq0AKQogjUdUh7SCAE/mode=imports/optimized/lit/decorators.js";let d=class extends i{constructor(){var t,i;super(),null!==(t=this.color)&&void 0!==t||(this.color=e`red`),null!==(i=this.size)&&void 0!==i||(this.size=e`30px`)}render(){return o` 2 <style> 3 :host { 4 font-size: ${this.size}; 5 --color: ${this.color}; 6 } 7 </style> 8 <div class="pyramid"> 9 <div class="face"></div> 10 <div class="face"></div> 11 <div class="face"></div> 12 <div class="face"></div> 13 </div> 14 `}};d.styles=e` 15 * { 16 margin: 0; 17 padding: 0; 18 } 19 20 :host { 21 display: block; 22 min-height: 1.5em; 23 min-width: 1.5em; 24 width: 1em; 25 perspective: 1250px; 26 } 27 .pyramid { 28 transform-style: preserve-3d; 29 transform: rotateX(-15deg) rotateY(-15deg); 30 position: absolute; 31 left: 0.25em; 32 bottom: 0.25em; 33 width: 1em; 34 height: 1em; 35 } 36 .pyramid > div { 37 background-color: var(--color); 38 position: absolute; 39 width: 100%; 40 height: 100%; 41 clip-path: polygon(50% 0, 100% 100%, 0 100%); 42 box-shadow: 0 0 0.25em #000 inset; 43 opacity: 0.7; 44 } 45 .pyramid > div:nth-child(1) { 46 transform: rotateX(30deg); 47 } 48 .pyramid > div:nth-child(2) { 49 transform: translate3d(0.25em, 0, -0.25em) rotateY(90deg) rotateX(30deg); 50 } 51 .pyramid > div:nth-child(3) { 52 transform: translate3d(0, 0, -0.5em) rotateY(180deg) rotateX(30deg); 53 } 54 .pyramid > div:nth-child(4) { 55 transform: translate3d(-0.25em, 0, -0.25em) rotateY(270deg) rotateX(30deg); 56 } 57 `,t([r({type:e,attribute:"color"})],d.prototype,"color",void 0),t([r({type:e,attribute:"size"})],d.prototype,"size",void 0),d=t([s("ns-pyramid-sprite")],d);export{d as PyramidSprite}; 58