/*
 * OscMix Web
 * Copyright (C) 2026 Martin Augustyniak
 * SPDX-License-Identifier: GPL-3.0-or-later
 * https://www.gnu.org/licenses/gpl-3.0.html
 */
@property --fader-height{syntax: "<length>"; inherits: true; initial-value: 320px;}@property --thumb-w{syntax: "<length>"; inherits: true; initial-value: 50px;}@property --thumb-h{syntax: "<length>"; inherits: true; initial-value: 22px;}.fader{font-size:14px;--fader-height: 20em;--thumb-w: 3.125em;--thumb-h: 1.375em;--thumb-border-radius: .2875em;--thumb-border-radius-calculated: calc(var(--thumb-border-radius) * 1.5);--track-w: 4px;--track-w-background-color: #2a2a2a;--track-background-color: #353535;--rail-col-w: calc(var(--thumb-h) + .75em);--tick-major-w: .875em;--tick-minor-w: .375em;--tick-color-w: .75em;--tick-color-h: .125em;--tick-right-w: .375em;--tick-color-3dBpos-color: #d04040;--tick-color-3dBneg-color: #44c050;--label-font-size: .6875em;--label-color: #888;--label-gap: .5em;--label-text-w: .75em;--scale-left-w: calc(var(--tick-major-w) + var(--label-gap) + var(--label-text-w));--scale-right-w: calc(var(--tick-right-w) + .5em);--meter-w: 1.35em;--meter-w-stereo: .64em;--meter-shift: .6em;display:grid;grid-template-columns:var(--scale-left-w) var(--rail-col-w) var(--scale-right-w);grid-template-rows:var(--fader-height) auto;row-gap:.5em;user-select:none}.fader .fader-scale{display:block;position:relative;height:100%;grid-row:1;width:auto;padding:0;margin:0}.fader .fader-scale--left{grid-column:1}.fader .fader-scale--right{grid-column:3}.fader .fader-scale--left>*{position:absolute;right:0;transform:translateY(-50%)}.fader .fader-scale--right>*{position:absolute;left:0;transform:translateY(-50%)}.fader .fader-scale .label{right:calc(var(--tick-major-w) + var(--label-gap));font-size:var(--label-font-size);color:var(--label-color);line-height:1}.fader .fader-scale .tick-major{width:var(--tick-major-w);height:1px;background:#888}.fader .fader-scale .tick-minor{width:var(--tick-minor-w);height:1px;background:#555}.fader .fader-scale--right .tick-major{width:var(--tick-right-w);background:#555}.fader .fader-scale .tick-color{width:var(--tick-color-w);height:var(--tick-color-h);border-radius:.0625em}.fader .fader-scale .tick-color.red{background:var(--tick-color-3dBpos-color)}.fader .fader-scale .tick-color.green{background:var(--tick-color-3dBneg-color)}.fader-meters{grid-column:1;grid-row:1;position:relative;height:100%;pointer-events:none;z-index:1}.fader-meters-rail{position:absolute;right:var(--meter-shift);display:flex;justify-content:flex-end;gap:1px}.fader-rail{position:relative;width:var(--rail-col-w);height:100%;grid-column:2;grid-row:1}.fader-readout{grid-column:2;grid-row:2;justify-self:center;min-width:3.5em;font-size:.8125em;font-variant-numeric:tabular-nums;color:#ccc;text-align:center;white-space:nowrap;cursor:context-menu}.fader-readout.over{color:var(--text-dim)}.fader input[type=range],.fader input[type=range]::-webkit-slider-runnable-track,.fader input[type=range]::-webkit-slider-thumb{-webkit-appearance:none}.fader input[type=range]{position:absolute;left:50%;top:50%;width:var(--fader-height);height:var(--rail-col-w);margin:0;padding:0;background:transparent;cursor:pointer;transform:translate(-50%,-50%) rotate(-90deg);writing-mode:horizontal-tb;direction:ltr}.fader input[type=range]:focus{outline:none}.fader input[type=range]::-webkit-slider-runnable-track{height:var(--track-w);background:transparent;border-radius:1px}.fader input[type=range]::-moz-range-track{height:var(--track-w);background:transparent;border-radius:1px}.fader input[type=range]:focus::-webkit-slider-runnable-track{background:transparent}.fader input[type=range]:focus::-moz-range-track{background:transparent}.fader-rail__track{position:absolute;left:50%;transform:translate(-50%);width:var(--track-w);background:var(--track-w-background-color);border-radius:1px;box-shadow:inset 0 0 0 1px #111;pointer-events:none}.fader-rail:focus-within .fader-rail__track{background:var(--track-background-color)}.fader-readout-edit{display:none;grid-column:2;grid-row:2;justify-self:center;min-width:3.5em;width:3.5em;padding:0 .2em;font-size:.8125em;font-family:inherit;font-variant-numeric:tabular-nums;text-align:center;color:#ccc;background:#2a2a2a;border:none;outline:1px solid #555;border-radius:2px;outline-offset:0}.fader-readout-edit.is-prefilled{color:#cccccc59}.fader input[type=range]{--_thumb-shadow: 0 0 0 1px rgba(0, 0, 0, .85), 0 .125em .25em rgba(0, 0, 0, .55);--_thumb-bg: linear-gradient(var(--cap-color), var(--cap-color)), linear-gradient( to right, transparent calc(50% - 1px) , var(--cap-line, rgba(0, 0, 0, .6)) calc(50% - 1px) , var(--cap-line, rgba(0, 0, 0, .6)) calc(50% + 1px) , transparent calc(50% + 1px) ), repeating-linear-gradient( to left, transparent 0, transparent .25em, rgba(255, 255, 255, .12) .25em, rgba(255, 255, 255, .12) .3125em ), linear-gradient( to right, #404040, #909090 25%, #c0c0c0 50%, #909090 75%, #404040 )}.fader input[type=range]::-webkit-slider-thumb{width:var(--thumb-w);height:var(--thumb-h);margin-top:calc((var(--track-w) - var(--thumb-h)) / 2);border:none;border-radius:var(--thumb-border-radius-calculated);cursor:pointer;box-shadow:var(--_thumb-shadow);background:var(--_thumb-bg)}.fader input[type=range]::-moz-range-thumb{width:var(--thumb-w);height:var(--thumb-h);border:none;border-radius:var(--thumb-border-radius-calculated);cursor:pointer;box-shadow:var(--_thumb-shadow);background:var(--_thumb-bg)}