import{LitElement as e,html as i,css as t}from"../../lit/index.js";import{SimpleColors as n}from"../simple-colors/simple-colors.js";import"../simple-icon/simple-icon.js";import"../simple-icon/lib/simple-icons.js";class LrndesignSidenote extends n{static get properties(){return{...super.properties,label:{type:String},icon:{type:String}}}static get haxProperties(){return new URL(`./lib/${this.tag}.haxProperties.json`,import.meta.url).href}constructor(){super(),this.label="",this.icon=""}static get styles(){return[super.styles,t`
        :host {
          display: block;
        }

        #container {
          display: block;
          background-color: var(
            --simple-colors-default-theme-accent-1,
            #ffffff
          );
          padding: var(--lrndesign-sidenote-container-padding, 16px);
          margin-left: var(--lrndesign-sidenote-container-margin-left, 0px);
          color: var(--simple-colors-default-theme-accent-12, #000);
        }

        #header {
          display: flex;
          align-items: center;
        }

        #icon {
          margin-right: 8px;
        }

        #label {
          font-size: 20.8px;
          margin: 12.8px 0;
          flex: 1 1 auto;
        }
      `]}render(){return i`
      <div id="container">
        <div id="header">
          <simple-icon id="icon" icon=${this.icon}></simple-icon>
          <div id="label">${this.label}</div>
        </div>
        <slot></slot>
      </div>
    `}static get tag(){return"lrndesign-sidenote"}}customElements.define("lrndesign-sidenote",LrndesignSidenote);export{LrndesignSidenote};