/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
import { c as i } from "../../chunks/runtime.js";
import { css as s, html as o } from "lit";
import { LitElement as t } from "@arcgis/lumina";
const l = s`:host{min-width:100px;flex:1 1 auto;display:flex;align-items:center;justify-content:center}.slider-progress-container{position:relative;z-index:1;flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center}.progress{--arcgis-internal-video-player-progress-width: 2px;appearance:none;position:absolute;top:calc(50% - var(--arcgis-internal-video-player-progress-width) / 2);left:var(--calcite-spacing-xs);border:none;background:var(--calcite-color-border-1);cursor:pointer;width:calc(100% - var(--calcite-spacing-xs) * 2);height:var(--arcgis-internal-video-player-progress-width)}.progress::-webkit-progress-bar{background-color:var(--calcite-color-border-3)}.progress::-webkit-progress-value{background-color:var(--calcite-color-border-input)}.progress::-moz-progress-bar{background-color:var(--calcite-color-border-3)}.slider{--calcite-slider-track-color: transparent;width:100%}`;
class a extends t {
  static {
    this.properties = { viewModel: 0, buffered: 9, value: 9 };
  }
  static {
    this.styles = l;
  }
  _onSliderInput({ currentTarget: e }) {
    if (typeof e.value == "number") {
      const r = e.value * this.viewModel.duration / 100;
      this.viewModel.seekTo(r);
    }
  }
  render() {
    const { value: e, buffered: r } = this;
    return o`<div class="slider-progress-container" dir=ltr><progress class="progress" max=1 .value=${`${r}`}></progress><div class="slider"><calcite-slider max=100 min=0 .value=${e} @calciteSliderInput=${this._onSliderInput}></calcite-slider></div></div>`;
  }
}
i("arcgis-video-player-slider", a);
export {
  a as VideoPlayerSlider
};
