/* ========================================================
   oo-slider-input
   ======================================================== */

:root {
    --oo-slider-thumb-size: 1.2rem;
    --oo-slider-track-height: 0.28rem;
}

/* ---- Layout ---- */

.oo-slider-input {
    display: flex;
    flex-direction: column;
    gap: var(--oo-space-1);
}

.oo-slider-input__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--oo-space-2);
}

.oo-slider-input__header .form--label {
    margin-bottom: 0;
}

.oo-slider-input__track-wrap {
    display: flex;
    align-items: center;
}

/* ---- Range-Wrap: beide Inputs übereinander, ::before zeichnet den Rail ---- */

.oo-slider-input__range-wrap {
    position: relative;
    flex: 1;
    height: var(--oo-slider-thumb-size);
    /* Füllung als einheitenlose Zahlen 0–100 (per Inline-Style überschrieben) */
    --oo-slider-fill-start: 0;
    --oo-slider-fill-end: 100;
}

.oo-slider-input__range-wrap::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: var(--oo-slider-track-height);
    border-radius: var(--oo-radius-full);
    background: linear-gradient(
        to right,
        var(--oo-gray-300)
            calc(var(--oo-slider-fill-start) / 100 * (100% - var(--oo-slider-thumb-size)) + var(--oo-slider-thumb-size) / 2),
        var(--oo-primary)
            calc(var(--oo-slider-fill-start) / 100 * (100% - var(--oo-slider-thumb-size)) + var(--oo-slider-thumb-size) / 2),
        var(--oo-primary)
            calc(var(--oo-slider-fill-end) / 100 * (100% - var(--oo-slider-thumb-size)) + var(--oo-slider-thumb-size) / 2),
        var(--oo-gray-300)
            calc(var(--oo-slider-fill-end) / 100 * (100% - var(--oo-slider-thumb-size)) + var(--oo-slider-thumb-size) / 2)
    );
    pointer-events: none;
    z-index: 0;
}

.oo-slider-input__range-wrap .oo-slider-input__input {
    position: absolute;
    left: 0;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
}

/* ---- Input: nur Klickfläche, kein sichtbarer Hintergrund ---- */

.oo-slider-input__input {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    width: 100%;
    height: var(--oo-slider-thumb-size);
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    /* Füllung für Single-Modus als einheitenlose Zahl 0–100 (per Inline-Style überschrieben) */
    --oo-slider-fill: 0;
}

.oo-slider-input__input::-moz-focus-outer {
    border: 0;
}

/* ---- Webkit: Track ---- */

.oo-slider-input__input::-webkit-slider-runnable-track {
    height: var(--oo-slider-track-height);
    border-radius: var(--oo-radius-full);
    background: linear-gradient(
        to right,
        var(--oo-primary) calc(var(--oo-slider-fill) / 100 * (100% - var(--oo-slider-thumb-size)) + var(--oo-slider-thumb-size) / 2),
        var(--oo-gray-300) calc(var(--oo-slider-fill) / 100 * (100% - var(--oo-slider-thumb-size)) + var(--oo-slider-thumb-size) / 2)
    );
}

/* Range-Inputs: Track transparent, Rail kommt von ::before am Wrapper */
.oo-slider-input__input--range::-webkit-slider-runnable-track {
    background: transparent;
}

/* ---- Firefox: Track ---- */

.oo-slider-input__input::-moz-range-track {
    height: var(--oo-slider-track-height);
    border-radius: var(--oo-radius-full);
    background: linear-gradient(
        to right,
        var(--oo-primary) calc(var(--oo-slider-fill) / 100 * (100% - var(--oo-slider-thumb-size)) + var(--oo-slider-thumb-size) / 2),
        var(--oo-gray-300) calc(var(--oo-slider-fill) / 100 * (100% - var(--oo-slider-thumb-size)) + var(--oo-slider-thumb-size) / 2)
    );
    border: none;
}

/* Range-Inputs: Track transparent */
.oo-slider-input__input--range::-moz-range-track {
    background: transparent;
    border: none;
}

/* ---- Bis-Handle: nur Thumb anklickbar ---- */

.oo-slider-input__input--bis {
    pointer-events: none;
    z-index: 2;
}

.oo-slider-input__input--bis::-webkit-slider-thumb { pointer-events: all; }
.oo-slider-input__input--bis::-moz-range-thumb     { pointer-events: all; }

/* ---- Webkit: Thumb ---- */

.oo-slider-input__input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: var(--oo-slider-thumb-size);
    height: var(--oo-slider-thumb-size);
    border-radius: 50%;
    background: var(--oo-gray-50);
    border: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    cursor: grab;
    transition: box-shadow var(--oo-transition);
    /* Vertikale Zentrierung in Chrome: Thumb relativ zum Track-Mittelpunkt ausrichten */
    margin-top: calc((var(--oo-slider-track-height) - var(--oo-slider-thumb-size)) / 2);
}

.oo-slider-input__input:not(:disabled):hover::-webkit-slider-thumb {
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}

.oo-slider-input__input::-webkit-slider-thumb:active {
    cursor: grabbing;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.32);
}

/* ---- Firefox: Thumb ---- */

.oo-slider-input__input::-moz-range-thumb {
    width: var(--oo-slider-thumb-size);
    height: var(--oo-slider-thumb-size);
    border-radius: 50%;
    background: var(--oo-gray-50);
    border: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    cursor: grab;
    transition: box-shadow var(--oo-transition);
}

.oo-slider-input__input:not(:disabled):hover::-moz-range-thumb {
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}

.oo-slider-input__input::-moz-range-thumb:active {
    cursor: grabbing;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.32);
}

/* ---- Fokus-Ring ---- */

.oo-slider-input__input:focus-visible::-webkit-slider-thumb {
    outline: 2px solid var(--oo-primary);
    outline-offset: 2px;
}

.oo-slider-input__input:focus-visible::-moz-range-thumb {
    outline: 2px solid var(--oo-primary);
    outline-offset: 2px;
}

/* ---- Disabled ---- */

.oo-slider-input__input:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.oo-slider-input__input:disabled::-webkit-slider-thumb { cursor: not-allowed; }
.oo-slider-input__input:disabled::-moz-range-thumb     { cursor: not-allowed; }

/* ---- Wertanzeige ---- */

.oo-slider-input__value {
    font-size: var(--oo-font-size-sm);
    color: var(--oo-color-text-subtle);
    white-space: nowrap;
}

.oo-slider-input__values {
    display: flex;
    align-items: center;
    gap: var(--oo-space-1);
}

/* ---- Size-Varianten ---- */

.oo-slider-input.oo-size-sm {
    --oo-slider-thumb-size: 1.05rem;
    --oo-slider-track-height: 0.22rem;
}

.oo-slider-input.oo-size-lg {
    --oo-slider-thumb-size: 1.3rem;
    --oo-slider-track-height: 0.34rem;
}

.oo-slider-input.oo-size-xl {
    --oo-slider-thumb-size: 1.45rem;
    --oo-slider-track-height: 0.4rem;
}