@color-picker-input-prefix-cls: ~"@{css-prefix}color-picker-input";
.@{color-picker-input-prefix-cls} {
    &-wrap {
        width: 145px;
        height: 35px;
        border: 1px solid @input-border-color;
        border-radius: 4px;
        position: relative;
        display: inline-block;
        vertical-align: middle;
        box-sizing: border-box;
    }
    &-error {
        border:1px solid @error-color;
        box-shadow: 0 0 2px @error-color;
    }
    &-write {
        border: none;
        line-height: 33px;
        width: 80px;
        float: left;
        padding-left: 15px;
        color: #657180;
        outline: none;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
    }

    .@{input-prefix-cls} {
        border: none;
    }
}
.dark {
    .@{color-picker-input-prefix-cls} {
        &-wrap {
            background: #414d56;
            border-color: @border-color-base-dark;
        }
        &-write {
            color: #bbbec4;
            background: #414d56;
        }
    }
}