/**
 * Book Open Icon Web Component
 * An open book icon
 */
class BookOpenIcon extends HTMLElement {
  static get observedAttributes() {
    return ["size", "color", "stroke-width"];
  }

  constructor() {
    super();
    this.attachShadow({ mode: "open" });
  }

  connectedCallback() {
    this.render();
  }

  attributeChangedCallback() {
    this.render();
  }

  get size() {
    return this.getAttribute("size") || "48";
  }

  get color() {
    return this.getAttribute("color") || "currentColor";
  }

  get strokeWidth() {
    return this.getAttribute("stroke-width") || "1";
  }

  render() {
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: inline-flex;
          align-items: center;
          justify-content: center;
        }
        svg {
          display: block;
        }
      </style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="${this.size}"
        height="${this.size}"
        viewBox="0 0 24 24"
        fill="none"
        stroke="${this.color}"
        stroke-width="${this.strokeWidth}"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <path d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25"></path>
      </svg>
    `;
  }
}

customElements.define("book-open-icon", BookOpenIcon);