<!--
SPDX-FileCopyrightText: puniko and other Sharkey contributors
SPDX-License-Identifier: AGPL-3.0-only
-->

<template>
<div v-if="hide" :class="$style.mod_player_disabled" @click="toggleVisible()">
	<div>
		<b><i class="ph-eye ph-bold ph-lg"></i> {{ i18n.ts.sensitive }}</b>
		<span>{{ i18n.ts.clickToShow }}</span>
	</div>
</div>

<div v-else :class="$style.mod_player_enabled">
	<div ref="patternDisplay" :style="{ height: displayHeight + 'px' }" :class="$style.pattern_display" @click="togglePattern()" @scroll="scrollHandler" @scrollend="scrollEndHandle">
		<div v-if="patternHide" :class="$style.pattern_hide">
			<b><i class="ph-eye ph-bold ph-lg"></i> Pattern Hidden</b>
			<span>{{ i18n.ts.clickToShow }}</span>
		</div>
		<span :class="$style.patternShadowTop"></span>
		<span :class="$style.patternShadowBottom"></span>
		<div ref="sliceDisplay" :class="$style.slice_display">
			<span ref="numberRowParent" :class="$style.numberRowParent">
				<canvas ref="numberRowCanvas" :style="{ top: numberRowOffset + 'px' }" :class="$style.row_canvas"></canvas>
			</span>
			<span>
				<span ref="sliceBackground1" :class="$style.sliceBackground">
					<canvas ref="sliceCanvas1" :class="$style.patternSlice"></canvas>
				</span>
				<span ref="sliceBackground2" :class="$style.sliceBackground">
					<canvas ref="sliceCanvas2" :class="$style.patternSlice"></canvas>
				</span>
				<span ref="sliceBackground3" :class="$style.sliceBackground">
					<canvas ref="sliceCanvas3" :class="$style.patternSlice"></canvas>
				</span>
			</span>
		</div>
	</div>
	<div :class="$style.controls">
		<input v-if="patternScrollSliderShow" ref="patternScrollSlider" v-model="patternScrollSliderPos" :class="$style.pattern_slider" type="range" min="0" max="100" step="0.01" style=""/>
		<button :class="$style.play" @click="playPause()">
			<i v-if="playing" class="ph-pause ph-bold ph-lg"></i>
			<i v-else class="ph-play ph-bold ph-lg"></i>
		</button>
		<button :class="$style.stop" @click="stop()">
			<i class="ph-stop ph-bold ph-lg"></i>
		</button>
		<input ref="progress" v-model="position" :class="$style.progress" type="range" min="0" max="1" step="0.1" @mousedown="initSeek()" @mouseup="performSeek()"/>
		<input v-model="player.context.gain.value" type="range" min="0" max="1" step="0.01"/>
		<a :class="$style.download" :title="i18n.ts.download" :href="module.url" :download="module.name" target="_blank">
			<i class="ph-download ph-bold ph-lg"></i>
		</a>
	</div>
	<i :class="$style.hide" class="ph-eye-slash ph-bold ph-lg" @click="toggleVisible()"></i>
</div>
</template>

<script lang="ts" setup>
const debug = console.debug;
const debugw = console.warn;
const debug_playPause = playPause;

import { ref, nextTick, watch, onDeactivated, onMounted } from 'vue';
import * as Misskey from 'misskey-js';
import type { Ref } from 'vue';
import { i18n } from '@/i18n.js';
import { ChiptuneJsPlayer, ChiptuneJsConfig } from '@/utility/chiptune2.js';
import { isTouchUsing } from '@/utility/touch.js';
import { prefer } from '@/preferences.js';

const colours = {
	background: '#000000',
	foreground: {
		default: '#ffffff',
		quarter: '#ffff00',
	},
};

const CHAR_WIDTH = 6;
const CHAR_HEIGHT = 12;
const ROW_OFFSET_Y = 10;
const CHANNEL_WIDTH = CHAR_WIDTH * 14;
const MAX_TIME_SPENT = 50;
const MAX_TIME_PER_ROW = 15;
const MAX_ROW_NUMBERS = 0x100;
// It would be a great option for users to set themselves.
const ROW_BUFFER = 26;
const MAX_CHANNEL_LIMIT = 0xFF;
const HALF_BUFFER = Math.floor(ROW_BUFFER / 2);
const MAX_SLICE_CHANNELS = 10;
const MAX_SLICE_WIDTH = CHANNEL_WIDTH * MAX_SLICE_CHANNELS + 1;

const props = defineProps<{
	module: Misskey.entities.DriveFile
}>();

class CanvasDisplay {
	ctx: CanvasRenderingContext2D;
	html: HTMLCanvasElement;
	background: HTMLSpanElement;
	drawn: { top: number, bottom: number, completed: boolean };
	vPos: number;
	transform: { x: number, y: number };
	drawStart: number;
	constructor (
		ctx: CanvasRenderingContext2D,
		html: HTMLCanvasElement,
		background: HTMLSpanElement,
	) {
		this.ctx = ctx;
		this.html = html;
		this.drawn = { top: 0, bottom: 0, completed: false };
		this.vPos = -0xFFFFFFFF;
		this.transform = { x: 0, y: 0 };
		this.drawStart = 0;
		this.background = background;
		// Hacky solution to seeing raw background while the module isn't loaded yet.
		background.style.display = 'flex';
	}
	updateStyleTransforms () {
		this.background.style.transform = 'translate(' + this.transform.x + 'px,' + this.transform.y + 'px)';
	}
	resetDrawn() {
		this.drawn = {
			top: 0xFFFFFFFF,
			bottom: -0xFFFFFFFF,
			completed: false,
		};
	}
}

const isSensitive = props.module.isSensitive;
const url = props.module.url;
let hide = ref((prefer.s.nsfw === 'force') ? true : isSensitive && (prefer.s.nsfw !== 'ignore'));
// Goto display function and set the default value there on the first frame.
// Yes, this is my solution to a problem. That or have a constant kicking round doing nothing of note.
let patternHide = ref(false);
let playing = ref(false);
let sliceDisplay = ref<HTMLDivElement>();
let numberRowCanvas = ref();
let sliceCanvas1 = ref();
let sliceCanvas2 = ref();
let sliceCanvas3 = ref();
let sliceBackground1 = ref();
let sliceBackground2 = ref();
let sliceBackground3 = ref();
let numberRowParent = ref();
const displayHeight = ref(ROW_BUFFER * CHAR_HEIGHT);
const numberRowOffset = ref(HALF_BUFFER * CHAR_HEIGHT);
let sliceWidth = 0;
let sliceHeight = 0;
let progress = ref<HTMLProgressElement>();
let position = ref(0);
let patternScrollSlider = ref<HTMLProgressElement>();
let patternScrollSliderShow = ref(false);
let patternScrollSliderPos = ref(0);
let patternDisplay = ref();
const player = ref(new ChiptuneJsPlayer(new ChiptuneJsConfig()));

let suppressScrollSliderWatcher = false;
let nbChannels = 0;
let currentColumn = 0;
let maxChannelsInView = 10;
let buffer = null;
let isSeeking = false;
let firstFrame = true;
let lastPattern = -1;
let lastDrawnRow = -1;
let alreadyHiddenOnce = false;
let virtualCanvasWidth = 0;
let slices: CanvasDisplay[] = [];
let numberRowPHTML: HTMLSpanElement;
//let copyBuffer = { canvas: new OffscreenCanvas(1, 1), ctx: OffscreenCanvasRenderingContext2D };

const PERF_MONITOR = {
	startTime: 0,
	patternTime: { current: 0, max: 0, initial: 0 },
	start: function() {
		this.startTime = performance.now();
	},
	end: function() {
		this.patternTime.current = performance.now() - this.startTime;
		if (this.patternTime.initial !== 0 && this.patternTime.current > this.patternTime.max) this.patternTime.max = this.patternTime.current;
		else if (this.patternTime.initial === 0) this.patternTime.initial = this.patternTime.current;
		//debug(this.patternTime.max);
	},
	asses: function() {
		if (this.patternTime.initial !== 0 && !alreadyHiddenOnce) {
			const trackerTime = player.value.currentPlayingNode.getProcessTime();

			if (this.patternTime.initial + trackerTime.max > MAX_TIME_SPENT && trackerTime.max + this.patternTime.max > MAX_TIME_PER_ROW) {
				alreadyHiddenOnce = true;
				togglePattern();
				return;
			}
		}

		this.patternTime = { current: 0, max: 0, initial: 0 };
	},
};

function bakeNumberRow() {
	if (!numberRowCanvas.value && !numberRowParent.value) return;
	numberRowCanvas.value.width = 2 * CHAR_WIDTH + 1;
	numberRowCanvas.value.height = MAX_ROW_NUMBERS * CHAR_HEIGHT + 1;
	numberRowPHTML = numberRowParent.value;
	let ctx = numberRowCanvas.value.getContext('2d', { alpha: false }) as OffscreenCanvasRenderingContext2D;
	ctx.font = '10px monospace';
	ctx.fillStyle = colours.background;
	ctx.fillRect( 0, 0, numberRowCanvas.value.width, numberRowCanvas.value.height );

	for (let i = 0; i <= MAX_ROW_NUMBERS; i++) {
		let rowText = i.toString(16);
		if (rowText.length === 1) rowText = '0' + rowText;

		ctx.fillStyle = colours.foreground.default;
		if (i % 4 === 0) ctx.fillStyle = colours.foreground.quarter;

		ctx.fillText(rowText, 0, 10 + i * 12);
	}
}

function setupSlice(canvas: Ref, back: Ref) {
	let backgorund = back.value as HTMLSpanElement;
	let chtml = canvas.value as HTMLCanvasElement;
	chtml.width = sliceWidth;
	chtml.height = sliceHeight;
	let slice = new CanvasDisplay(
		chtml.getContext('2d', { alpha: false, desynchronized: false }) as CanvasRenderingContext2D,
		chtml,
		backgorund,
	);
	slice.ctx.font = '10px monospace';
	slice.ctx.imageSmoothingEnabled = false;
	slices.push(slice);
}

function setupCanvas() {
	if (
		sliceCanvas1.value && sliceCanvas2.value && sliceCanvas3.value &&
		sliceBackground1.value && sliceCanvas2.value && sliceCanvas3.value
	) {
		nbChannels = 0;
		if (player.value.currentPlayingNode) {
			nbChannels = player.value.currentPlayingNode.nbChannels;
			nbChannels = nbChannels > MAX_CHANNEL_LIMIT ? MAX_CHANNEL_LIMIT : nbChannels;
		}
		virtualCanvasWidth = 13 + CHANNEL_WIDTH * nbChannels + 2;
		sliceWidth = MAX_SLICE_WIDTH > virtualCanvasWidth ? virtualCanvasWidth : maxChannelsInView * CHANNEL_WIDTH + 1;
		sliceHeight = HALF_BUFFER * CHAR_HEIGHT;
		setupSlice(sliceCanvas1, sliceBackground1);
		setupSlice(sliceCanvas2, sliceBackground2);
		setupSlice(sliceCanvas3, sliceBackground3);
		if (sliceDisplay.value) sliceDisplay.value.style.minWidth = (virtualCanvasWidth - CHANNEL_WIDTH) + 'px';
	} else {
		nextTick(() => {
			console.warn('SkModPlayer: Jumped to the next tick, is Vue ok?');
			setupCanvas();
		});
	}
}

onMounted(() => {
	player.value.load(url).then((result) => {
		buffer = result;
		try {
			player.value.play(buffer);
			progress.value!.max = player.value.duration();
			bakeNumberRow();
			setupCanvas();
			display(true);
		} catch (err) {
			console.warn(err);
		}
		player.value.stop();
	}).catch((error) => {
		console.error(error);
	});
	if (patternDisplay.value) {
		let observer = new ResizeObserver(resizeHandler);
		observer.observe(patternDisplay.value);
	}
});

function playPause() {
	player.value.addHandler('onRowChange', () => {
		progress.value!.max = player.value.duration();
		if (!isSeeking) {
			position.value = player.value.position() % player.value.duration();
		}
		display();
	});

	player.value.addHandler('onEnded', () => {
		stop();
	});

	if (player.value.currentPlayingNode === null) {
		player.value.play(buffer);
		player.value.seek(position.value);
		playing.value = true;
	} else {
		player.value.togglePause();
		playing.value = !player.value.currentPlayingNode.paused;
	}
}

function stop(noDisplayUpdate = false) {
	player.value.stop();
	playing.value = false;
	if (!noDisplayUpdate) {
		try {
			player.value.play(buffer);
			lastDrawnRow = -1;
			lastPattern = -1;
			display(true);
		} catch (err) {
			console.warn(err);
		}
	}
	player.value.stop();
	position.value = 0;
	player.value.handlers = [];
}

function initSeek() {
	isSeeking = true;
}

function performSeek(forceUpate = false) {
	const noNode = !player.value.currentPlayingNode;
	if (noNode) player.value.play(buffer);
	player.value.seek(position.value);
	if (!patternHide.value || forceUpate) display(true);
	if (noNode) player.value.stop();
	isSeeking = false;
}

function toggleVisible() {
	hide.value = !hide.value;
	if (!hide.value) {
		lastPattern = -1;
		lastDrawnRow = -1;
		nextTick(() => {
			playPause();
		});
	}
	nextTick(() => { stop(hide.value); });
}

function togglePattern() {
	patternHide.value = !patternHide.value;
	handleScrollBarEnable();

	if (player.value.getRow() === 0 && player.value.getPattern() === 0) {
		try {
			performSeek(true);
		} catch (err) {
			console.warn(err);
		}
		player.value.stop();
	}
}

function drawSlices(skipOptimizationChecks = false) {
	// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
	if (ROW_BUFFER <= 0) {
		lastDrawnRow = player.value.getPattern();
		lastPattern = player.value.getRow();
		return;
	}

	const pattern = player.value.getPattern();
	const row = player.value.getRow();
	const lower = row + HALF_BUFFER;
	const upper = row - HALF_BUFFER;
	const newDisplayTanslation = -row * CHAR_HEIGHT;
	let curRow = row - HALF_BUFFER;

	if (pattern === lastPattern && !skipOptimizationChecks && row !== lastDrawnRow) {
		const rowDif = row - lastDrawnRow;
		const isRowDirPos = rowDif > 0;
		const rowDir = !isRowDirPos as unknown as number;
		const rowDirInv = 1 - 1 * rowDir;
		const norm = 1 - 2 * rowDir;
		const oneAndHalfBuf = HALF_BUFFER * 3;

		//debug('rowDif', rowDif, 'rowDir', rowDir, 'norm', norm, 'isRowDirPos', isRowDirPos);

		slices.forEach((sli) => {
			sli.vPos -= rowDif;
			if (sli.vPos <= 0 || sli.vPos >= oneAndHalfBuf) {
				sli.drawStart += oneAndHalfBuf * norm;
				sli.vPos = oneAndHalfBuf * rowDirInv;
				sli.transform.y += (oneAndHalfBuf * CHAR_HEIGHT) * norm;
				sli.updateStyleTransforms();
				sli.resetDrawn();

				sli.ctx.fillStyle = colours.background;
				sli.ctx.fillRect(0, 0, sliceWidth, sliceHeight);

				//debug(sli);
			}
			let patternText: string[] = [];
			for (let i = 0; i < HALF_BUFFER; i++) {
				const newRow = sli.drawStart + i;

				if (sli.drawn.bottom >= newRow && sli.drawn.top <= newRow || newRow < upper || newRow < upper) {
					patternText.push('');
					continue;
				}
				if (sli.drawn.top > newRow) sli.drawn.top = newRow;
				if (sli.drawn.bottom <= newRow) sli.drawn.bottom = newRow;

				patternText.push(rowText(sli, newRow, pattern));
				//drawRow(sli, newRow, pattern, 0, i * CHAR_HEIGHT + ROW_OFFSET_Y);
			}
			drawText(sli, patternText);
		});
	} else {
		numberRowPHTML.style.maxHeight = ((player.value.getPatternNumRows(pattern) + HALF_BUFFER) * CHAR_HEIGHT) + 'px';
		slices.forEach((sli, i) => {
			sli.drawStart = curRow;
			sli.vPos = HALF_BUFFER * (i + 1);
			sli.transform.y = -newDisplayTanslation;
			sli.updateStyleTransforms();
			sli.resetDrawn();

			sli.ctx.fillStyle = colours.background;
			sli.ctx.fillRect(0, 0, sliceWidth, sliceHeight);

			let patternText: string[] = [];

			for (let itter = 0; itter < HALF_BUFFER; itter++) {
				if (sli.drawn.top > curRow) sli.drawn.top = curRow;
				if (sli.drawn.bottom <= curRow) sli.drawn.bottom = curRow;
				patternText.push(rowText(sli, curRow, pattern));
				curRow++;
				if (curRow > lower) break;
			}
			drawText(sli, patternText);
			//debug(sli);
		});
	}

	if (sliceDisplay.value) sliceDisplay.value.style.transform = 'translateY(' + newDisplayTanslation + 'px)';

	lastDrawnRow = row;
	lastPattern = pattern;
}

function rowText(slice: CanvasDisplay, row: number, pattern: number) : string {
	if (!player.value.currentPlayingNode) return '';
	if (row < 0 || row > player.value.getPatternNumRows(pattern) - 1) return '';
	let retrunStr = '|';

	for (let channel = currentColumn; channel < nbChannels; channel++) {
		if (channel === maxChannelsInView + currentColumn) break;
		const part = player.value.getPatternRowChannel(pattern, row, channel);
		retrunStr += part + '|';
	}
	return retrunStr;
}

function drawText(slice: CanvasDisplay, text: string[], drawX = 0, drawY = ROW_OFFSET_Y) {
	slice.ctx.fillStyle = colours.foreground.default;
	text.forEach((str, i) => {
		if (str.length !== 0) slice.ctx.fillText(str, drawX, drawY + CHAR_HEIGHT * i);
	});

	return true;
}

function display(skipOptimizationChecks = false) {
	if (!sliceDisplay.value || !sliceDisplay.value.parentElement) {
		stop();
		return;
	}

	if (patternHide.value && !skipOptimizationChecks) return;

	if (firstFrame) {
		// Changing it to false should enable pattern display by default.
		patternHide.value = false;
		handleScrollBarEnable();
		firstFrame = false;
	}

	const row = player.value.getRow();
	const pattern = player.value.getPattern();

	if ( row === lastDrawnRow && pattern === lastPattern && !skipOptimizationChecks) return;

	drawSlices(skipOptimizationChecks);
}

function forceUpdateDisplay() {
	const noNode = !player.value.currentPlayingNode;
	if (noNode) player.value.play(buffer);
	if (!patternHide.value) display(true);
	if (noNode) player.value.togglePause();
	if (currentColumn + maxChannelsInView >= nbChannels) return;
	slices.forEach((sli) => {
		sli.transform.x = currentColumn * CHANNEL_WIDTH + 1;
		sli.updateStyleTransforms();
	});
}

function scrollHandler() {
	suppressScrollSliderWatcher = true;

	if (!sliceDisplay.value) return;
	if (!sliceDisplay.value.parentElement) return;

	if (patternScrollSlider.value) {
		patternScrollSliderPos.value = (sliceDisplay.value.parentElement.scrollLeft) / ((virtualCanvasWidth - CHANNEL_WIDTH) - sliceDisplay.value.parentElement.offsetWidth) * 100;
		patternScrollSlider.value.style.opacity = '1';
	}
	const newColumn = Math.trunc((sliceDisplay.value.parentElement.scrollLeft - 13) / CHANNEL_WIDTH);
	//debug('newColumn', newColumn, 'currentColumn', currentColumn, 'maxChannelsInView', maxChannelsInView, 'newColumn + MAX_SLICE_CHANNELS <= nbChannels', newColumn + maxChannelsInView <= nbChannels);
	if (newColumn !== currentColumn && newColumn + maxChannelsInView <= nbChannels) {
		currentColumn = newColumn;
		forceUpdateDisplay();
	}
}

function scrollEndHandle() {
	suppressScrollSliderWatcher = false;

	if (!patternScrollSlider.value) return;
	patternScrollSlider.value.style.opacity = '';
}

function handleScrollBarEnable() {
	patternScrollSliderShow.value = (!patternHide.value && !isTouchUsing);
	if (patternScrollSliderShow.value !== true) return;

	if (!sliceDisplay.value || !sliceDisplay.value.parentElement) return;
	patternScrollSliderShow.value = (virtualCanvasWidth > sliceDisplay.value.parentElement.offsetWidth);
}

watch(patternScrollSliderPos, () => {
	if (!sliceDisplay.value || !sliceDisplay.value.parentElement || suppressScrollSliderWatcher) return;

	sliceDisplay.value.parentElement.scrollLeft = ((virtualCanvasWidth - CHANNEL_WIDTH) - sliceDisplay.value.parentElement.offsetWidth) * patternScrollSliderPos.value / 100;
});

function resizeHandler(event: ResizeObserverEntry[]) {
	if (event[0].contentRect.width === 0) return;
	const newView = Math.ceil(event[0].contentRect.width / CHANNEL_WIDTH) + 1;
	//if (newView !== maxChannelsInView) updateSliceSize();
	if (newView > maxChannelsInView) forceUpdateDisplay();
	maxChannelsInView = newView;
	handleScrollBarEnable();
}

onDeactivated(() => {
	stop();
});

</script>

<style lang="scss" module>

html {
		--SkModPlayer-default: #ffffff;
		--SkModPlayer-quarter: #ffff00;
		--SkModPlayer-instr: #80e0ff;
		--SkModPlayer-volume: #80ff80;
		--SkModPlayer-fx: #ff80e0;
		--SkModPlayer-operant: #ffe080;
}

.hide {
	border-radius: var(--MI-radius-sm) !important;
	background-color: black !important;
	color: var(--MI_THEME-indicator) !important;
	font-size: 12px !important;
}

.mod_player_enabled {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;

	> i {
		display: block;
		position: absolute;
		border-radius: var(--MI-radius-sm);
		background-color: var(--MI_THEME-fg);
		color: var(--MI_THEME-indicator);
		font-size: 14px;
		opacity: .5;
		padding: 3px 6px;
		text-align: center;
		cursor: pointer;
		top: 12px;
		right: 12px;
		z-index: 4;
	}

	> .pattern_display {
		width: 100%;
		overflow-x: scroll;
		overflow-y: hidden;
		background-color: black;
		text-align: center;
		flex-flow: column;
		display: flex;
		max-height: 312px; /* magic_number = CHAR_HEIGHT * rowBuffer, needs to be in px */

		scrollbar-width: none;

		&::-webkit-scrollbar {
			display: none;
		}

		.slice_display {
			display: flex;
			position: relative;
			background-color: black;
			image-rendering: pixelated;
			span {
				.sliceBackground {
					display: none;
					width: fit-content;
					height: fit-content;
					position: relative;
					background: repeating-linear-gradient(
						to right,
						var(--SkModPlayer-default) 0px calc(5 * 6px),
						var(--SkModPlayer-instr) calc(5 * 6px) calc(7 * 6px),
						var(--SkModPlayer-volume) calc(7 * 6px) calc(10 * 6px),
						var(--SkModPlayer-fx) calc(10 * 6px) calc(13 * 6px),
						var(--SkModPlayer-operant) calc(13 * 6px) calc(14 * 6px),
					);
					.patternSlice {
						position: static;
						image-rendering: pixelated;
						mix-blend-mode: multiply;
					}
				}
			}
			.numberRowParent {
				position: sticky;
				right: 0;
				z-index: 1;
				inset: 0;
				width: fit-content;
				height: 200%;
				overflow: clip;
				background: #000000;
				.row_canvas {
					position: relative;
					right: 0;
					z-index: 1;
					inset: 0;
				}
			}
		}

		.patternShadowTop {
			background: #00000080;
			width: 100%;
			height: calc(50% - 14px);
			translate: 0 -100%;
			top: calc(50% - 14px);
			position: absolute;
			pointer-events: none;
			z-index: 2;
		}

		.patternShadowBottom {
			background: #00000080;
			width: 100%;
			height: calc(50% - 27px);
			top: calc(50% - 2px);
			position: absolute;
			pointer-events: none;
			z-index: 2;
		}

		.pattern_hide {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background: rgba(64, 64, 64, 0.3);
			backdrop-filter: var(--MI-modalBgFilter);
			color: #fff;
			font-size: 12px;

			position: absolute;
			z-index: 4;
			width: 100%;
			height: 100%;

			> span {
				display: block;
			}
		}
	}

	> .controls {
		display: flex;
		width: 100%;
		background-color: var(--MI_THEME-bg);
		z-index: 5;

		> * {
			padding: 4px 8px;
		}

		> button, a {
			border: none;
			background-color: transparent;
			color: var(--MI_THEME-accent);
			cursor: pointer;

			&:hover {
				background-color: var(--MI_THEME-fg);
			}
		}

		> input[type=range] {
			height: 21px;
			-webkit-appearance: none;
			width: 90px;
			padding: 0;
			margin: 4px 8px;
			overflow-x: hidden;

			&.pattern_slider {
				position: absolute;
				width: calc( 100% - 8px * 2 );
				top: calc( 100% - 21px * 3 );
				opacity: 0%;
				transition: opacity 0.2s;

				&:hover {
					opacity: 100%;
				}
			}

			&:focus {
				outline: none;

				&::-webkit-slider-runnable-track {
					background: var(--MI_THEME-bg);
				}

				&::-ms-fill-lower, &::-ms-fill-upper {
					background: var(--MI_THEME-bg);
				}
			}

			&::-webkit-slider-runnable-track {
				width: 100%;
				height: 100%;
				cursor: pointer;
				border-radius: 0;
				animate: 0.2s;
				background: var(--MI_THEME-bg);
				border: 1px solid var(--MI_THEME-fg);
				overflow-x: hidden;
			}

			&::-webkit-slider-thumb {
				border: none;
				height: 100%;
				width: 14px;
				border-radius: 0;
				background: var(--MI_THEME-indicator);
				cursor: pointer;
				-webkit-appearance: none;
				box-shadow: calc(-100vw - 14px) 0 0 100vw var(--MI_THEME-accent);
				clip-path: polygon(1px 0, 100% 0, 100% 100%, 1px 100%, 1px calc(50% + 10.5px), -100vw calc(50% + 10.5px), -100vw calc(50% - 10.5px), 0 calc(50% - 10.5px));
				z-index: 1;
			}

			&::-moz-range-track {
				width: 100%;
				height: 100%;
				cursor: pointer;
				border-radius: 0;
				animate: 0.2s;
				background: var(--MI_THEME-bg);
				border: 1px solid var(--MI_THEME-fg);
			}

			&::-moz-range-progress {
				cursor: pointer;
				height: 100%;
				background: var(--MI_THEME-accent);
			}

			&::-moz-range-thumb {
				border: none;
				height: 100%;
				border-radius: 0;
				width: 14px;
				background: var(--MI_THEME-indicator);
				cursor: pointer;
			}

			&::-ms-track {
				width: 100%;
				height: 100%;
				cursor: pointer;
				border-radius: 0;
				animate: 0.2s;
				background: transparent;
				border-color: transparent;
				color: transparent;
			}

			&::-ms-fill-lower {
				background: var(--MI_THEME-accent);
				border: 1px solid var(--MI_THEME-fg);
				border-radius: 0;
			}

			&::-ms-fill-upper {
				background: var(--MI_THEME-bg);
				border: 1px solid var(--MI_THEME-fg);
				border-radius: 0;
			}

			&::-ms-thumb {
				margin-top: 1px;
				border: none;
				height: 100%;
				width: 14px;
				border-radius: 0;
				background: var(--MI_THEME-indicator);
				cursor: pointer;
			}

			&.progress {
				flex-grow: 1;
				min-width: 0;
			}
		}
	}
}

.mod_player_disabled {
	display: flex;
	justify-content: center;
	align-items: center;
	background: #111;
	color: #fff;

	> div {
		display: table-cell;
		text-align: center;
		font-size: 12px;

		> b {
			display: block;
		}
	}
}
</style>
