import { LitElement, css, html } from 'lit'

class HorizontalScroller extends LitElement {
  static properties = {}

  constructor() {
    super()
  }

  render() {
    return html`
      <div class="scroller">
        <slot></slot>
      </div>
    `
  }

  static styles = css`
    :host {
      --col-width: 10em;
      --gap: 1em;
    }

    .scroller {
      display: grid;
      gap: var(--gap);
      grid-auto-flow: column;
      grid-auto-columns: var(--col-width);
      width: calc(100vw - 1em);
      overflow: auto;
      scroll-behaviour: smooth;
      scroll-padding-inline: 0.5em;
      padding-inline-start: 0.5em;
      padding-inline-end: 0.5em;
      padding-block-start: 0.25em;
      padding-block-end: 0.75em;
    }
  `
}

customElements.define('mm-hscroller', HorizontalScroller)