.editor-percentage-scaler{
    .scaler-wrapper{
        position: relative;
    }
    .scaler-line {
        width: 1px;
        background: #979797;
        height: 6px;
        position: absolute;
        bottom: -4px;
        left: 50%;
    }
    .scaler-mask {
        display: inline-block;
        vertical-align: middle;
        width: 150px;
        height: 3px;
        margin: auto 5px;
    }
    .scaler-mask-inner{
        display: block;
        position: relative;
        background: #DEE3E4;
        width: 100%;
        height: 100%;
        border-radius:100px;
    }
    .scaler-bar{
        display: inline-block;
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 3px;
        background: #015CF9;
        border-radius:100px;
    }
    .scaler-btn{
        position: absolute;
        border-radius: 50%;
        width: 17px;
        height: 17px;
        left: 0;
        top: -1px;
        background: white;
        border: 1px solid #979797;
        // &.active {
        //     border-color: #979797;
        // }
        // &.active::after{
        //     background: #fd9425;
        // }
    }
    .scaler-crop-button{
        -webkit-appearance: none;
        border: 0;
        position: relative;
        top: 1px;
        color: #333;
        margin-right: 5px;
        cursor: pointer;
        outline: 0;
        &.active {
            color: #015CF9;
        }
    }
    .scaler-tooltip-wrapper{
        width: 20px;
        height: 20px;
        display: inline-block;
        position: relative;
        left: -2px;
        top: -2px;
        z-index: 1;
        cursor: pointer;
    }
}