@color-picker-prefix-cls: ~"@{css-prefix}color-picker";

.@{color-picker-prefix-cls} {
    &-rel{
        line-height: 0;
    }
    &-color{
        width: 18px;
        height: 18px;
        border: 1px solid @text-color;
        position: relative;
        top: 2px;
    }
    &-large &-color{
        width: 20px;
        height: 20px;
        top: 1px;
    }
    &-small &-color{
        width: 14px;
        height: 14px;
        top: 3px;
    }

    &-picker{
        padding: 8px 8px 0;
        &-panel{
            width: 200px;
            height: 200px;
            margin: 0 auto;
            background: #47cb89;
            border-radius: 50%;
        }
        &-hue-slider{

        }
        &-alpha-slider{

        }
        &-colors{
            margin-top: 8px;
            span{
                display: inline-block;
                width: 18px;
                height: 18px;
                em{
                    display: block;
                    width: 16px;
                    height: 16px;
                    border: 1px solid transparent;
                    cursor: pointer;
                    border-radius: 2px;
                }
            }
        }
        &-colors-recommended{
            span:last-child em{
                border: 1px solid #6b6f78;
            }
        }
        .@{picker-prefix-cls}-confirm{
            margin-top: 8px;
        }
    }
}