@use 'sass:math'
@import '../css/colors-variables'

@mixin input-range-thumb-mixin
    @include elevation-1(false)

    &::after
        content: '1'

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

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

    width: 20px
    height: 20px
    appearance: none
    border-radius: 50%
    box-sizing: border-box
    outline: 10px solid transparent
    background: $primary
    transition: .2s cubic-bezier(0.2, 0, 0, 1)

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

    & > input::-webkit-slider-thumb:hover + div.m3.m3-slider-label
        opacity: 1

    & > div.m3.m3-slider-label
        @include center(inline-flex)

        top: -10px
        opacity: 0
        width: 28px
        position: absolute
        pointer-events: none
        height: 14px * math.sqrt(2) + 14px

        &::before
            top: 0
            content: ""
            width: 28px
            rotate: 45deg
            aspect-ratio: 1
            position: absolute
            border-radius: 14px 14px 0 14px
            background-color: $primary

        & > label.m3.m3-typography
            display: inline
            font-weight: 500
            margin-top: -5px
            position: absolute
            font-size: 12px !important
            color: $on-primary

    & > datalist
        display: none

input[type="range"].m3.m3-slider
    margin: 0
    appearance: none
    border-radius: 2px
    background: $surface-container-highest

    &:-moz-any(&)
        height: 4px

    &:-webkit-any(&)
        background: linear-gradient(to right, $primary 0%, $surface-container-highest 0%)

    &::-moz-range-track
        height: 4px
        overflow: hidden
        border-radius: 2px

    &::-moz-range-progress
        height: 4px
        overflow: hidden
        border-radius: 2px
        background-color: $primary

    &::-moz-range-thumb
        @include input-range-thumb-mixin

        border: none

    &::-webkit-slider-container
        height: 4px
        appearance: none
        box-shadow: none
        border-radius: 2px
        min-block-size: 4px

    &::-webkit-slider-runnable-track
        height: 4px

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

        &: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
        border-radius: 50%
        margin-top: -8px
        box-sizing: border-box
        outline: 10px solid transparent
        background: var(--md-sys-color-primary)
        transition: .2s cubic-bezier(0.2, 0, 0, 1)