import{css as t,html as e,Component as i}from"wkit";import"../base/icon.js";class o extends i{static props={title:"str!",subTitle:"",type:"success",icon:""};static styles=[t`:host{display:inline-flex}:host([type=success]) .icon{background:var(--color-teal-1)}:host([type=warning]) .icon{background:var(--color-orange-1)}:host([type=error]) .icon{background:var(--color-red-1)}:host([type=info]) .icon{background:var(--color-blue-1)}.container{display:flex;align-items:center;flex-direction:column;text-align:center;max-width:440px;padding:36px 32px;line-height:1.5;font-size:14px;color:var(--color-dark-1)}.icon{display:flex;justify-content:center;align-items:center;width:52px;height:52px;line-height:1;border-radius:50%;background:var(--wc-result-icon-color, var(--color-dark-1));color:#fff}.title{margin-top:16px;font-size:18px}.sub-title{margin-top:6px}.extra{margin-top:12px}`];get#t(){return this.icon?this.icon:this.type==="success"?"get":this.type==="error"?"deny":this.type}render(){return e`
      <main class="container">
        <div class="icon">
          <slot name="icon"><wc-icon name=${this.#t}></wc-icon></slot>
        </div>

        <h3 class="title">
          <slot name="title">${this.title}</slot>
        </h3>

        <section class="sub-title">
          <slot name="sub-title">${this.subTitle}</slot>
        </section>

        <cite class="extra"><slot></slot></cite>
      </main>
    `}}o.reg("result");