// gmage-editor-range-picker
.gmage-editor-range-picker{
    border-right: 12px solid transparent;
    height: 16px;
    position: relative;
    cursor: pointer;

    &:hover {
        .ball{
            transform: scale(1.4);
        }
        .ball-tip {
            transform: scale(1);
        }
    }

    &:before{
        box-sizing: content-box;
        content: "";
        padding-right: 8px;
        width: 100%;
    }
    &:after {
        content: "";
        width: 100%;
        height: 40px;
        margin-top: -10px;
        display: block;
    }


    &_tooltip {
        .ball-tip {
            position: relative;
            &::before,
            &::after {
                position: absolute;
                left: 50%;
                opacity: 0;
                line-height: 20px;
                font-style: normal;
                transform: translateX(-50%);
                transition: all 0.3s;
                pointer-events: none;
            }
            &::before {
                content: '';
                top: 15px;
                top: 0;
                z-index: 999;
                width: 0;
                height: 0;
                border: 5px solid rgba(0, 0, 0, 0);
                border-top-color: rgba(0, 0, 0, 0.7);
                color: rgba(0, 0, 0, 0.8);
            }
            &::after {
                content: attr(aria-label);
                top: -10px;
                top: -25px;
                padding: 3px 5px;
                border-radius: 3px;
                font-size: 12px;
                white-space: pre;
                color: #fff;
                background: rgba(0, 0, 0, 0.7);
                -webkit-font-smoothing: subpixel-antialiased;
            }
        }
        &:hover {
            .ball-tip {
                &::before,
                &::after {
                    opacity: 1;
                    // transition: all .3s;
                    transition: all 0.3s 0.5s;
                }
                &::before {
                    top: 5px;
                    top: -10px;
                }
                &::after {
                    top: -20px;
                    top: -35px;
                }
            }
        }
    }

    &:before,
    .progress{
        background: #CCCCCC;
        border-radius: 2px;
        height: 2px;
        position: absolute;
        top: 7px;
        left: 0;
    }
    .progress{
        background-color: #0D69FF;
        width: 0;

        em {
            display: none;
        }
    }

    .ball{
        background: #0D69FF;
        border-radius: 50%;
        border: none;
        cursor: pointer;
        height: 8px;
        width: 8px;
        position: absolute;
        top: 4px;
        left: 0;
        transition: transform .2s;
    }

    &_disabled {
        cursor: default;

        .progress,.ball {
            background: #eee;
        }
    }
}