&.vscode {
    width: 336px; 
    display: inline-block;
    background-color: #333;
    border: 1px solid #ececec;
    box-sizing: border-box;
    border-radius: 0px;

    .colorpicker-body {
        border-radius: 0px;
        display: inline-block;

        .color-view {
            height: 34px;

            &.has-eyedropper {
                display: flex;
                .color-view-container {
                    width: 254px;
                    display: inline-block;
                }

                
                .el-cp-color-control__left {
                    float: right;
                    width: 80px;
                    text-align: center;
                    padding: 6px 0px;
                    
                    button {
                        display: inline-block;

                        svg {
                            path {
                                fill: white;
                            }
                        }
                    }
                }
            }

            .color-view-container {
                line-height: 34px;
                font-size: 14px;
                text-align: center;                
                width: 100%;
                height: 100%;
                cursor: pointer;
                user-select: none;                
                text-shadow: 0 0 3px rgb(83, 83, 83);
                @include transparent-background();
                
                .preview {
                    display: block;
                    height: 100%;
                }
            }
        }

        .color-tool {
            padding: 8px;
        }
    }

    .color {
        display:inline-block;
        width: 240px;
        height: 160px;
        vertical-align: middle;
    }

    .control {
        height: 160px;
        vertical-align: middle;
        display:inline-block;
        padding: 0px 0px 0px 4px;

        .hue, .opacity {
            margin: 0px;
            padding:0px;
            width: 30px;
            display:inline-block;
            vertical-align: middle;
            height: 100%;
            position: relative;
        }


        .hue {
            padding-left: 5px;
            width: 35px;
        }

        .hue > .hue-container {
            border-radius:0px;
            height: 100%;
            background: linear-gradient(to top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);            
        }
      

        .opacity > .opacity-container {
            border-radius: 0px;
            height: 100%;            
            width: 30px;
        }
        

        .drag-bar, .drag-bar2 {
            background-color: transparent;
            height:5px;
            width:33px;
            box-sizing: border-box;
            box-shadow: none;
            transform: translateY(-50%) translateX(-2px);
            border: 1px solid rgba(255, 255, 255, 1); 
            border-radius: 0px;
            box-shadow: 0 0 2px 0 rgba(0, 0, 0, 1), inset 0 0 0 0 rgba(0, 0, 0, 1);

            
        }

    }

}