import { SkinMixin } from "../skin-mixin.js";
import { renderIcon } from "../../icons/dist/render/minimal/index.js";
import { iconState } from "../../skins/dist/default/shared/tailwind/icon-state.js";
import { tooltipState } from "../../skins/dist/default/shared/tailwind/tooltip-state.js";
import { button } from "../../skins/dist/default/minimal/tailwind/components/button.js";
import { buttonGroup } from "../../skins/dist/default/minimal/tailwind/components/button-group.js";
import { icon, iconContainer, iconFlipped } from "../../skins/dist/default/minimal/tailwind/components/icon.js";
import { seek } from "../../skins/dist/default/minimal/tailwind/components/seek.js";
import { slider } from "../../skins/dist/default/minimal/tailwind/components/slider.js";
import { time } from "../../skins/dist/default/minimal/tailwind/components/time.js";
import "../media/container.js";
import "../ui/mute-button.js";
import "../ui/play-button.js";
import "../ui/playback-rate-button.js";
import "../ui/popover.js";
import "../ui/seek-button.js";
import "../ui/time.js";
import "../ui/time-slider.js";
import "../ui/tooltip.js";
import "../ui/tooltip-group.js";
import "../ui/volume-slider.js";
import { playbackRate } from "../../skins/dist/default/default/tailwind/components/playback-rate.js";
import { controls, popup, root } from "../../skins/dist/default/minimal/tailwind/audio.tailwind.js";
import { ReactiveElement } from "@videojs/element";
import { cn } from "@videojs/utils/style";

//#region src/define/audio/minimal-skin.tailwind.ts
const SEEK_TIME = 10;
function getTemplateHTML() {
	return `<media-container class="${root}"><slot name="media"></slot><slot></slot><div class="${controls}"><media-tooltip-group><div class="${buttonGroup}"><span class="${tooltipState.play.wrapper}"><media-play-button commandfor="play-tooltip" class="${cn(button.base, button.icon, iconState.play.button)}"> ${renderIcon("restart", { class: cn(icon, iconState.play.restart) })} ${renderIcon("play", { class: cn(icon, iconState.play.play) })} ${renderIcon("pause", { class: cn(icon, iconState.play.pause) })} </media-play-button><media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}"><span class="${tooltipState.play.replay}">Replay</span><span class="${tooltipState.play.play}">Play</span><span class="${tooltipState.play.pause}">Pause</span></media-tooltip></span><media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}"><span class="${iconContainer}"> ${renderIcon("seek", { class: cn(icon, iconFlipped) })} <span class="${cn(seek.label, seek.labelBackward)}">${SEEK_TIME}</span></span></media-seek-button><media-tooltip id="seek-backward-tooltip" side="top" class="${cn(popup.tooltip)}"> Seek backward ${SEEK_TIME} seconds </media-tooltip><media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}"><span class="${iconContainer}"> ${renderIcon("seek", { class: icon })} <span class="${cn(seek.label, seek.labelForward)}">${SEEK_TIME}</span></span></media-seek-button><media-tooltip id="seek-forward-tooltip" side="top" class="${cn(popup.tooltip)}"> Seek forward ${SEEK_TIME} seconds </media-tooltip></div><div class="${time.controls}"><media-time-group class="${time.group}"><media-time type="current" class="${time.current}"></media-time><media-time-separator class="${time.separator}"></media-time-separator><media-time type="duration" class="${time.duration}"></media-time></media-time-group><media-time-slider class="${slider.root}"><media-slider-track class="${slider.track}"><media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill><media-slider-buffer class="${cn(slider.fill.base, slider.fill.buffer)}"></media-slider-buffer></media-slider-track><media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.interactive)}"></media-slider-thumb></media-time-slider></div><div class="${buttonGroup}"><media-playback-rate-button commandfor="playback-rate-tooltip" class="${cn(button.base, button.icon, playbackRate.button)}"></media-playback-rate-button><media-tooltip id="playback-rate-tooltip" side="top" class="${cn(popup.tooltip)}"> Toggle playback rate </media-tooltip><media-mute-button commandfor="audio-volume-popover" class="${cn(button.base, button.icon, iconState.mute.button)}"> ${renderIcon("volume-off", { class: cn(icon, iconState.mute.volumeOff) })} ${renderIcon("volume-low", { class: cn(icon, iconState.mute.volumeLow) })} ${renderIcon("volume-high", { class: cn(icon, iconState.mute.volumeHigh) })} </media-mute-button><media-popover id="audio-volume-popover" open-on-hover delay="200" close-delay="100" side="left" class="${cn(popup.volume)}"><media-volume-slider class="${slider.root}" orientation="horizontal" thumb-alignment="edge"><media-slider-track class="${slider.track}"><media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill></media-slider-track><media-slider-thumb class="${slider.thumb.base}"></media-slider-thumb></media-volume-slider></media-popover></div></media-tooltip-group></div></media-container>`;
}
var MinimalAudioSkinTailwindElement = class extends SkinMixin(ReactiveElement) {
	static {
		this.tagName = "audio-minimal-skin-tailwind";
	}
	static {
		this.getTemplateHTML = getTemplateHTML;
	}
};
customElements.define(MinimalAudioSkinTailwindElement.tagName, MinimalAudioSkinTailwindElement);

//#endregion
export { MinimalAudioSkinTailwindElement };
//# sourceMappingURL=minimal-skin.tailwind.js.map