scale {
    $slider-width: rem(16px);
    $trough-width: 0.5rem;
    $slider-margin: ($slider-width - $trough-width) / 2 * -1;

    // `has_origin = true`
    highlight {
        background-color: #{'@accent_color'};

        &:backdrop {
            background-color: scale-color($fg-color, $alpha: -50%);
        }
    }

    slider {
        // 16px - border
        min-height: calc(#{$slider-width} - 1px);
        min-width: calc(#{$slider-width} - 1px);

        transition:
            box-shadow duration("expand") easing(),
            opacity duration("expand") easing(),
            transform duration("expand") easing("ease-out-back");
    }

    trough {
        @include trough;

        min-height: $trough-width;
        min-width: $trough-width;
    }

    value {
        @extend .small-label;
        @extend .numeric;
    }

    &.dragging {
        slider {
            transform: scale(1.1);
            transition:
                box-shadow duration("collapse") easing(),
                transform duration("collapse") easing();
            box-shadow:
                highlight(),
                0 0 0 1px $border-color,
                shadow(3);
        }
    }

    &.horizontal {
        fill.top {
            border-radius: rem(12px) 0 0 rem(12px);
        }

        fill.bottom {
            border-radius: 0 rem(12px) rem(12px) 0;
        }

        slider {
            margin: $slider-margin -1px;
        }

        value {
            // Padding + text height + margin
            $value-osd-height: (rem(6px) * 2) + 0.85rem + rem(6px);

            &.bottom,
            &.top {
                @extend .osd;

                opacity: 0;
                transform: scale(0.9);
                transition:
                    opacity duration("in-place") easing(),
                    transform duration("collapse") easing();
            }

            &.bottom {
                margin-bottom: $value-osd-height * -1;
                margin-top: rem(3px);
            }

            &.top {
                margin-bottom: rem(3px);
                margin-top: $value-osd-height * -1;
            }
        }

        &.dragging value {
            &.bottom,
            &.top {
                opacity: 1;
                transform: scale(1);
                transition: transform duration("expand") easing("ease-out-back");
            }
        }
    }

    &.vertical {
        slider {
            margin: -1px $slider-margin;
        }
    }
}
