.#{$ns}ColorPicker {
    position: relative;
    display: inline-flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    border: $ColorPicker-borderWidth solid $ColorPicker-borderColor;
    font-size: $ColorPicker-fontSize;
    padding: $ColorPicker-paddingY $ColorPicker-paddingX;
    background-color: $ColorPicker-bg;
    color: $ColorPicker-color;

    &:not(.is-disabled) {
        cursor: pointer;

        &:hover {
            background-color: $ColorPicker-onHover-bg;
            border-color: $ColorPicker-onHover-borderColor;
        }
    }

    &-input {
        border: 0;
        background: transparent;
        outline: none;
        width: 100%;
        flex-basis: 0;
        flex-grow: 1;
        padding: 0;
        margin: 0;
        height: $ColorPicker-fontSize * $ColorPicker-lineHeight;

        &::placeholder {
            color: $ColorPicker-placeholderColor;
        }
    }

    &.is-focused {
        border-color: $ColorPicker-onFocused-borderColor;
        box-shadow: $Form-input-boxShadow;
    }

    &.is-disabled {
        background: $ColorPicker-onDisabled-bg;
        color: $ColorPicker-onDisabled-color;
        pointer-events: none;

        > .#{$ns}ColorPicker-input {
            color: $ColorPicker-onDisabled-color;

            &::placeholder {
                color: $ColorPicker-onDisabled-color;
            }
        }
    }

    &-preview {
        display: flex;
        align-items: center;
        margin-left: $gap-xs;
        cursor: pointer;
    }

    &-previewIcon {
        display: block;
        width: px2rem(16px);
        height: px2rem(16px);
        box-shadow: $boxShadowSm;
    }

    &-clear {
        @include input-clear();
        display: inline-block;
        line-height: 1;
    }
}

.#{$ns}ColorControl:not(.is-inline) > .#{$ns}ColorPicker {
    display: flex;
}

// override

.sketch-picker {
    box-shadow: none !important;
    border-radius: 0 !important;
    border: none !important;
}