class RSVPPipeMarker extends HTMLElement {
  constructor() {
    super()
    const shadow = this.attachShadow({ mode: 'open' })
    shadow.innerHTML = `
      <style>
      :host {display: block}
      .marker { text-align: center }
      </style>
      <div class="marker">|</div>
      <slot></slot>
      <div class="marker">|</div>
    `
  }
}

class RSVPBorderMarker extends HTMLElement {
  constructor() {
    super()
    const shadow = this.attachShadow({ mode: 'open' })
    shadow.innerHTML = `
      <style>
      :host {display: block; margin: 5px 0;}
      .top, .bottom { display: flex;}
      .a {flex:1} .b {flex:1}
      .bottom { align-items: flex-end; }
      .side { background-color: black; height: 2px;}

      .center { background-color: black; height: 6px; width: 2px}
      </style>
      <div class="top">
        <div class="side a"></div><div class="center"></div><div class="side b"></div>
      </div>
        <slot></slot>
      <div class="bottom">
        <div class="side a"></div><div class="center"></div><div class="side b"></div>
      </div>
      <div class="marker"></div>
    `
  }
}

window.customElements.define('rsvp-pipe-marker', RSVPPipeMarker)
window.customElements.define('rsvp-border-marker', RSVPBorderMarker)