dat.gui/elements/dat-gui-number/dat-gui-number.styl

@import '../shared/shared'

track-size = 1px
fill-size = 1px
knob-size = 0.6em

#container  
    height 100%

#track-container  
    height 100%
    padding-right padding

#track  
    width 100%
    height track-size
    border-radius track-size
    display inline-block
    position relative
    background light

#fill 
    height fill-size
    margin-top ( ( track-size - fill-size ) / 2 )
    margin-left 1px
    border-radius 100%
    position absolute
    background color-number
    pointer-events none

#knob  

    width knob-size
    height knob-size

    margin-left -( knob-size / 2 )
    margin-top -( knob-size / 2 )

    transition transform 0.1s ease

    pointer-events none
    position absolute

    background-color color-number
    border-radius 100%

#track-container
    +hover()
        #knob
            transform scale( 2 )

#track-container:active #knob 
    transform scale( 1.5 )

// .transition #knob 
//     transition left 0.2s ease, transform 0.1s ease
// 

// .transition #fill 
//     transition left 0.2s ease, right 0.2s ease, width 0.2s ease
// 

input  
    
    color color-number

    &::selection  
        background-color light
    

    .slider-true & 
    
        text-align center
        width 26%
        transition width 0.2s ease
        padding 0

        +hover() 
            width 50%

        &:focus  
            width 50%
        
        
    .slider-false &  
        // border-bottom 1px solid color-number
        padding-left padding