&.ring {
    .colorpicker-body {

        > .color {
            position: absolute;
            width: 120px;
            height: 120px;
            left: 52px;
            top: 52px;
        }

        .wheel {
            width: 224px;
            height: 224px;
            position: relative;
            box-sizing: border-box;

            .wheel-canvas {
                width: 214px;
                height: 214px;
                border-radius: 50%;
                position: absolute;
                left:5px;
                top:5px;
            }

            .drag-pointer {
                display:inline-block;
                position: absolute;
                width: 10px;
                height: 10px;
                left:50%;
                top:50%;
                border:1px solid white;
                border-radius: 50%;
                transform: translateX(-50%) translateY(-50%);
                z-index:2;
            }
        }

    }

    .control {
        padding-top: 0px;

        .value {
            display: none;
        }

        > .color, > .empty {
            top: -17px;
            width: 30px;
            height: 30px;
            border-radius: 2px;
        }


        &.has-eyedropper {
            padding-left: 30px;
            padding-top: 10px;
    
            > .color, > .empty {
                top: -2px;
            }

            .el-cp-color-control__left {
              top: 4px;
            }
        }        
    }
}