div.m3.m3-slider-container
    height: 20px
    display: flex
    align-items: center

input[type="range"].m3.m3-slider
    margin: 0
    height: 4px
    appearance: none
    overflow: visible
    border-radius: 2px
    margin-inline: 10px
    background-color: var(--md-sys-color-surface-container-highest)

    &::-webkit-slider-container
        margin-inline: -8px

    &::-webkit-slider-thumb
        @include elevation-1(false)

        &::after
            width: 40px
            aspect-ratio: 1
            background-color: transparent

        &:hover
            outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)

        &:is(:active, :focus-visible)
            outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)

        width: 20px
        aspect-ratio: 1
        appearance: none
        overflow: visible
        border-radius: 50%
        box-sizing: border-box
        outline: 10px solid transparent
        background: var(--md-sys-color-primary)
        transition: .2s cubic-bezier(0.2, 0, 0, 1)