import { LitElement, html, svg, css } from "lit";
import { customElement} from "lit/decorators.js";

const arrowPath = svg`<path d="M9 6l6 6-6 6" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>`;
@customElement("hvs-arrow-right-icon")
export default class HvsArrowRightIcon extends LitElement {

  protected render() {
    return html`
      <div class="icon-container">
        <svg
          stroke-width="1.5"
          width="24px"
          height="24px"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          stroke="#98A2B3"
        >
          ${arrowPath}
        </svg>
      </div>
    `;
  }

  static styles = css`
  .icon-container {
    width: 24px;
    height: 24px;
  }
  `
}

declare global {
  interface HTMLElementTagNameMap {
    "hvs-arrow-right-icon": HvsArrowRightIcon;
  }
}