.vanilla-slider-field {
    width: 100%;
}

.vanilla-slider-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-5);
    margin-bottom: var(--space-2);
}

.vanilla-slider-label,
.vanilla-slider-value {
    margin: 0;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
}

.vanilla-slider-value {
    flex: 0 0 auto;
}

/* Variants mirror the buttons: the thumb IS the matching button, so only the
   filled part of the track is left to say. The thumb colour repeats the
   button's own fill and stays overridable per instance. */
.vanilla-slider-primary {
    --vanilla-slider-color: var(--color-purple-700);
    --vanilla-slider-track-color: var(--color-border-default);
    --vanilla-slider-thumb-color: var(--accent-purple-dark);
}

.vanilla-slider-secondary {
    /* The same grey in light, a much darker one in dark: a near-white fill
       would shout louder than the handle. */
    --vanilla-slider-color: var(--color-border-strong);
    --vanilla-slider-track-color: var(--color-border-default);
    --vanilla-slider-thumb-color: var(--secondary-button-bg);
}

/* Two sizes: medium is the default; small trims the thumb by 4 px and the
   track by 3 px. */
.vanilla-slider-md {
    --vanilla-slider-track-height: 10px;
    --vanilla-slider-thumb-size: 28px;
}

.vanilla-slider-sm {
    --vanilla-slider-track-height: 7px;
    --vanilla-slider-thumb-size: 24px;
}

.vanilla-slider-control {
    position: relative;
    display: flex;
    align-items: center;
    height: var(--vanilla-slider-thumb-size, 28px);
}

/* Recessed like a text input. */
.vanilla-slider-track {
    position: absolute;
    inset-inline: 0;
    height: var(--vanilla-slider-track-height, 10px);
    overflow: hidden;
    border-radius: 999px;
    background: var(--vanilla-slider-track-color);
    box-shadow: var(--input-inner-shadow);
    pointer-events: none;
}

/* The fill stops under the centre of the thumb, so it tracks what the reader
   grabs rather than the raw percentage of the full width. */
.vanilla-slider-fill {
    display: block;
    width: calc(
        var(--vanilla-slider-progress, 0%)
        + (0.5 - var(--vanilla-slider-ratio, 0)) * var(--vanilla-slider-thumb-size, 28px)
    );
    height: 100%;
    border-radius: inherit;
    background: var(--vanilla-slider-color);
}

/* A target zone paints the band itself instead of a fill up to the value. */
.vanilla-slider-field-target .vanilla-slider-fill {
    width: 100%;
    background: linear-gradient(
        to right,
        transparent 0 var(--vanilla-slider-target-start),
        var(--vanilla-slider-color) var(--vanilla-slider-target-start) var(--vanilla-slider-target-end),
        transparent var(--vanilla-slider-target-end) 100%
    );
}

/* The thumb is a small button — literally: it carries .btn-accent or
   .btn-outline-secondary, so the raised shadow, the inner edge and the outer
   rim all come from the button rules. Only the geometry is ours. */
.vanilla-slider-thumb.btn {
    position: absolute;
    left: calc(
        var(--vanilla-slider-progress, 0%)
        - var(--vanilla-slider-ratio, 0) * var(--vanilla-slider-thumb-size, 28px)
    );
    width: var(--vanilla-slider-thumb-size, 28px);
    height: var(--vanilla-slider-thumb-size, 28px);
    min-width: 0;
    padding: 0;
    border-radius: 50%;
    background: var(--vanilla-slider-thumb-color);
    /* The input above it takes every pointer event, so the button never
       animates towards a state it cannot reach. */
    transition: none;
    pointer-events: none;
}

/* The native input keeps every behaviour — drag, keyboard, form value — and
   lies invisible on top of the drawing. */
.vanilla-slider-input {
    position: relative;
    z-index: 1;
    width: 100%;
    height: var(--vanilla-slider-thumb-size, 28px);
    margin: 0;
    padding: 0;
    border: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    opacity: 0;
    cursor: pointer;
}

.vanilla-slider-input:focus {
    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
}

[data-theme="dark"] input.vanilla-slider-input,
[data-theme="dark"] input.vanilla-slider-input:focus {
    border: 0;
    background: transparent;
}

/* The invisible thumb only has to match the drawn one, so the grab area lines
   up with what the reader sees. */
.vanilla-slider-input::-webkit-slider-thumb {
    width: var(--vanilla-slider-thumb-size, 28px);
    height: var(--vanilla-slider-thumb-size, 28px);
    border: 0;
    border-radius: 50%;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
}

.vanilla-slider-input::-moz-range-thumb {
    width: var(--vanilla-slider-thumb-size, 28px);
    height: var(--vanilla-slider-thumb-size, 28px);
    border: 0;
    border-radius: 50%;
    background: transparent;
}

.vanilla-slider-input:focus-visible ~ .vanilla-slider-thumb,
.vanilla-slider-field:focus-within .vanilla-slider-input:focus-visible ~ .vanilla-slider-thumb {
    box-shadow: var(--raised-button-shadow), 0 0 0 var(--raised-button-focus-width) var(--raised-button-focus-ring);
}

.vanilla-slider-input:disabled {
    cursor: not-allowed;
}

.vanilla-slider-field-disabled .vanilla-slider-label,
.vanilla-slider-field-disabled .vanilla-slider-value {
    color: var(--text-secondary);
}

.vanilla-slider-field-disabled .vanilla-slider-track,
.vanilla-slider-field-disabled .vanilla-slider-thumb {
    filter: saturate(0.35);
}