.input-range {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    position: relative;

    // since the input is rotated 90deg, these are how the dimensions 
    // actually appear on the element after transformations
    --input-visual-width: 1.5rem;
    --input-visual-height: 8rem;

    &.disabled {
        color: var(--disabled-text);
    }

    label {
        margin-bottom: 0.5rem;
        font-size: 0.75rem;
        max-width: 3rem;
    }

    .input-range-input-container {
        width: var(--input-visual-width);
        height: var(--input-visual-height);
    }

    input {
        -webkit-appearance: none;
        width: var(--input-visual-height);
        height: var(--input-visual-width);
        background: transparent;
        border-radius: var(--border-radius-lg);

        // hack: just a horizontal slider rotated 90deg,
        // since browser support here is limited
        transform-origin: top left;
        transform: rotate(-90deg) translateX(-100%);

        &:focus {
            outline: none;
        }

        &:disabled::-webkit-slider-runnable-track {
            cursor: auto;
        }

        &::-moz-range-track {
            height: var(--input-visual-width);
            width: var(--input-visual-height);
            border: none;
            border-radius: var(--border-radius-lg);
            cursor: pointer;

            // shadows have to be rotated 90deg to account for element rotation
            background: #e0e0e0;
            box-shadow: inset -3px 3px 9px #c7c7c7,
                inset 3px -3px 9px #f9f9f9;
        }

        &::-webkit-slider-runnable-track {
            -webkit-appearance: none;
            height: var(--input-visual-width);
            width: var(--input-visual-height);
            border: none;
            border-radius: var(--border-radius-lg);
            cursor: pointer;

            // shadows have to be rotated 90deg to account for element rotation
            background: #e0e0e0;
            box-shadow: inset -3px 3px 9px #c7c7c7,
                inset 3px -3px 9px #f9f9f9;
        }

        &:disabled::-moz-range-thumb {
            background-color: var(--disabled-text);
            box-shadow: none;
        }

        &:disabled::-webkit-slider-thumb {
            background-color: var(--disabled-text);
            box-shadow: none;
            cursor: auto;
        }

        &::-moz-range-thumb {
            width: var(--input-visual-width);
            height: var(--input-visual-width);
            border-radius: 50%;
            cursor: pointer;
            border: none;
            margin-top: 0px; // necessary in Chrome
            background-color: var(--electric-blue);
            position: relative;
            box-shadow: 0 0 16px 8px rgba(var(--electric-blue-rgb), 0.15);
        }

        // currently doesn't work because of `-webkit-appearance: slider-vertical` above
        &::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: var(--input-visual-width);
            height: var(--input-visual-width);
            border-radius: 50%;
            cursor: pointer;
            border: none;
            margin-top: 0px; // necessary in Chrome
            background-color: var(--electric-blue);
            position: relative;
            box-shadow: 0 0 16px 8px rgba(var(--electric-blue-rgb), 0.15);
        }
    }

    .input-range-value-label {
        position: absolute;
        bottom: -1.25rem;
        font-size: 0.75rem;
    }
}

.keyboard-user .input-range input:focus {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
}