/**
 * {}
 * @author yutent<yutent.io@gmail.com>
 * @date 2023/12/19 16:53:27
 */

import { html, css, Component } from 'wkit'

class Slider extends Component {
  static styles = [
    css`
      :host {
        display: flex;
        width: 100%;
        height: 256px;
      }

      .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: 100%;
      }
      li {
        list-style: none;
      }
    `,
    css`
      .list {
        position: relative;
        width: 100%;
        height: 100%;

        .item {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          border-radius: 16px;
          background: var(--color-blue-1);
        }
      }
    `
  ]

  render() {
    return html`
      <main class="container">
        <ul class="list">
          <li class="item"></li>
          <li class="item"></li>
          <li class="item"></li>
        </ul>
      </main>
    `
  }
}

Slider.reg('slider')