vexip-ui/css/color-picker.css

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

.vxp-input-vars{--vxp-input-bg-color:var(--vxp-fill-color-base);--vxp-input-bg-color-disabled:var(--vxp-fill-color-humble);--vxp-input-b-color:var(--vxp-border-color-base);--vxp-input-b-color-hover:var(--vxp-color-primary-light-1);--vxp-input-b-color-focus:var(--vxp-input-b-color-hover);--vxp-input-s-color-focus:var(--vxp-color-primary-opacity-6);--vxp-input-placeholder-color:var(--vxp-content-color-placeholder);--vxp-input-control-color:var(--vxp-content-color-base);--vxp-input-control-color-disabled:var(--vxp-content-color-disabled);--vxp-input-icon-color:var(--vxp-content-color-secondary);--vxp-input-icon-color-hover:var(--vxp-color-primary-base);--vxp-input-icon-color-disabled:var(--vxp-input-control-color-disabled);--vxp-input-before-bg-color:var(--vxp-fill-color-background);--vxp-input-after-bg-color:var(--vxp-fill-color-background);--vxp-input-line-height:var(--vxp-line-height-base);--vxp-input-border:var(--vxp-border-shape) var(--vxp-input-b-color);--vxp-input-radius:var(--vxp-radius-base);--vxp-input-count-color:var(--vxp-content-color-secondary);--vxp-input-count-color-disabled:var(--vxp-input-control-color-disabled);--vxp-input-count-font-size:var(--vxp-font-size-secondary);--vxp-input-count-line-height:var(--vxp-line-height-secondary);--vxp-input-height:32px;--vxp-input-v-padding:4px;--vxp-input-h-padding:8px;--vxp-input-padding:var(--vxp-input-v-padding) var(--vxp-input-h-padding);--vxp-input-prefix-width:32px;--vxp-input-suffix-width:32px}.vxp-input-wrapper{font-family:var(--vxp-font-family-base);font-size:var(--vxp-font-size-base);font-variant-numeric:tabular-nums;line-height:var(--vxp-line-height-base);color:var(--vxp-content-color-base);position:relative;display:inline-flex;align-items:center;width:100%;min-width:0;background-color:var(--vxp-input-bg-color);border-radius:var(--vxp-input-radius)}.vxp-input-wrapper,.vxp-input-wrapper *,.vxp-input-wrapper ::after,.vxp-input-wrapper ::before{box-sizing:border-box}.vxp-input-wrapper--inherit{font-family:inherit;font-size:inherit;font-variant-numeric:inherit;line-height:inherit}.vxp-input{font-family:var(--vxp-font-family-base);font-size:var(--vxp-font-size-base);font-variant-numeric:tabular-nums;line-height:var(--vxp-line-height-base);color:var(--vxp-content-color-base)}.vxp-input,.vxp-input *,.vxp-input ::after,.vxp-input ::before{box-sizing:border-box}.vxp-input--inherit{font-family:inherit;font-size:inherit;font-variant-numeric:inherit;line-height:inherit}.vxp-input{position:relative;display:inline-flex;align-items:center;width:100%;height:var(--vxp-input-height);padding:var(--vxp-input-v-padding) var(--vxp-input-h-padding);cursor:text;background-color:var(--vxp-input-bg-color);border:var(--vxp-border-shape) var(--vxp-input-b-color);border-radius:var(--vxp-input-radius);outline:0;transition:var(--vxp-transition-background),var(--vxp-transition-border),var(--vxp-transition-shadow)}.vxp-input:hover{border-color:var(--vxp-input-b-color-hover)}.vxp-input--focused,.vxp-input:focus,.vxp-input:focus-within{z-index:2;border-color:var(--vxp-input-b-color-focus);box-shadow:var(--vxp-shadow-focus) var(--vxp-input-s-color-focus)}.vxp-input--small{--vxp-input-height:24px;--vxp-input-v-padding:1px}.vxp-input--large{--vxp-input-height:40px;--vxp-input-v-padding:7px}.vxp-input.vxp-input--success{--vxp-input-b-color:var(--vxp-color-success-light-1);--vxp-input-b-color-hover:var(--vxp-color-success-light-1);--vxp-input-s-color-focus:var(--vxp-color-success-opacity-6)}.vxp-input.vxp-input--error{--vxp-input-b-color:var(--vxp-color-error-light-1);--vxp-input-b-color-hover:var(--vxp-color-error-light-1);--vxp-input-s-color-focus:var(--vxp-color-error-opacity-6)}.vxp-input.vxp-input--warning{--vxp-input-b-color:var(--vxp-color-warning-light-1);--vxp-input-b-color-hover:var(--vxp-color-warning-light-1);--vxp-input-s-color-focus:var(--vxp-color-warning-opacity-6)}.vxp-input--readonly{cursor:auto}.vxp-input--transparent{background-color:transparent}.vxp-input--transparent,.vxp-input--transparent--focused,.vxp-input--transparent:focus,.vxp-input--transparent:focus-within,.vxp-input--transparent:hover{border-color:transparent;box-shadow:unset}.vxp-input--disabled{cursor:not-allowed;background-color:var(--vxp-input-bg-color-disabled)}.vxp-input--disabled,.vxp-input--disabled:focus,.vxp-input--disabled:focus-within,.vxp-input--disabled:hover{border-color:var(--vxp-border-color-base);box-shadow:none}.vxp-input--disabled .vxp-color-picker__control,.vxp-input--disabled .vxp-color-picker__icon,.vxp-input--disabled .vxp-input__control,.vxp-input--disabled .vxp-input__icon{color:var(--vxp-input-control-color-disabled);pointer-events:none;cursor:not-allowed}.vxp-input--disabled.vxp-input--focused{border-color:var(--vxp-border-color-base);box-shadow:none}.vxp-input__control{flex:1 0 0;min-width:0;height:100%;padding:0;font-size:inherit;line-height:var(--vxp-input-line-height);color:var(--vxp-input-control-color);background-color:transparent;border:0;border-radius:var(--vxp-input-radius);outline:0;transition:var(--vxp-transition-color)}.vxp-input__control:disabled{cursor:not-allowed}.vxp-input__control::-moz-placeholder{color:var(--vxp-input-placeholder-color)}.vxp-input__control::placeholder{color:var(--vxp-input-placeholder-color)}.vxp-input__control::-ms-clear,.vxp-input__control::-ms-reveal{display:none}.vxp-input--readonly .vxp-input__control{cursor:auto}.vxp-input__icon{display:flex;align-items:center;justify-content:center;height:100%;color:var(--vxp-input-icon-color);-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxp-input__icon--placeholder{min-width:14px;min-height:1px;margin-inline-start:4px;visibility:hidden;opacity:0}.vxp-input__prefix{margin-inline-end:4px}.vxp-input__suffix{margin-inline-start:4px;transition:var(--vxp-transition-opacity)}.vxp-input__clear{padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;background:0 0;border:0;outline:0}.vxp-input__clear,.vxp-input__loading{position:absolute;inset-inline-end:var(--vxp-input-h-padding);min-width:14px;margin-inline-start:4px;cursor:pointer}.vxp-input__loading{pointer-events:none}.vxp-input-wrapper .vxp-input{flex:1 0 0;width:auto;min-width:0;background-color:transparent;border-radius:0}.vxp-input-wrapper--before-only .vxp-input{border-start-start-radius:0;border-start-end-radius:var(--vxp-input-radius);border-end-end-radius:var(--vxp-input-radius);border-end-start-radius:0}.vxp-input-wrapper--after-only .vxp-input{border-start-start-radius:var(--vxp-input-radius);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--vxp-input-radius)}.vxp-input--before{z-index:1;border-inline-start-color:transparent}.vxp-input--after{z-index:1;border-inline-end-color:transparent}.vxp-input__suffix-wrapper{position:relative;display:flex;align-items:center}.vxp-input__clear,.vxp-input__loading{inset-inline-end:0}.vxp-input__password{margin-inline-start:4px;cursor:pointer}.vxp-input__count{margin:0 4px;font-size:var(--vxp-input-count-font-size);line-height:var(--vxp-input-count-line-height);color:var(--vxp-input-count-color);pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:var(--vxp-transition-color)}.vxp-input--disabled .vxp-input__count{color:var(--vxp-input-count-color-disabled)}.vxp-input__after,.vxp-input__before{position:relative;display:flex;align-items:center;height:calc(var(--vxp-input-height));padding:0 var(--vxp-input-h-padding);border:var(--vxp-input-border)}.vxp-input__after--action,.vxp-input__before--action{padding:0;border:0}.vxp-input__before{background-color:var(--vxp-input-before-bg-color);border-inline-end:0;border-start-start-radius:var(--vxp-input-radius);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--vxp-input-radius)}.vxp-input__before--action{margin-inline-end:-1px;background-color:transparent}.vxp-input__before--action>.vxp-button{width:calc(100% + 2 * var(--vxp-input-h-padding));height:100%;border-start-start-radius:var(--vxp-input-radius);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--vxp-input-radius)}.vxp-input__before--action>.vxp-button--icon-only{width:calc(var(--vxp-button-height) + 2 * var(--vxp-input-h-padding))}.vxp-input__before--action>.vxp-input-wrapper,.vxp-input__before--action>.vxp-number-input{width:calc(100% + 2 * var(--vxp-input-h-padding));height:100%;border-start-start-radius:var(--vxp-input-radius);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--vxp-input-radius)}.vxp-input__before--action>.vxp-cascader{width:calc(100% + 2 * var(--vxp-input-h-padding));height:100%}.vxp-input__before--action>.vxp-cascader .vxp-cascader__selector{min-width:60px;height:100%;background-color:transparent;box-shadow:unset;border-start-start-radius:var(--vxp-input-radius);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--vxp-input-radius)}.vxp-input__before--action>.vxp-color-picker{width:calc(100% + 2 * var(--vxp-input-h-padding));height:100%}.vxp-input__before--action>.vxp-color-picker .vxp-color-picker__selector{min-width:60px;height:100%;background-color:transparent;box-shadow:unset;border-start-start-radius:var(--vxp-input-radius);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--vxp-input-radius)}.vxp-input__before--action>.vxp-date-picker{width:calc(100% + 2 * var(--vxp-input-h-padding));height:100%}.vxp-input__before--action>.vxp-date-picker .vxp-date-picker__selector{min-width:60px;height:100%;background-color:transparent;box-shadow:unset;border-start-start-radius:var(--vxp-input-radius);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--vxp-input-radius)}.vxp-input__before--action>.vxp-select{width:calc(100% + 2 * var(--vxp-input-h-padding));height:100%}.vxp-input__before--action>.vxp-select .vxp-select__selector{min-width:60px;height:100%;background-color:transparent;box-shadow:unset;border-start-start-radius:var(--vxp-input-radius);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--vxp-input-radius)}.vxp-input__before--action>.vxp-time-picker{width:calc(100% + 2 * var(--vxp-input-h-padding));height:100%}.vxp-input__before--action>.vxp-time-picker .vxp-time-picker__selector{min-width:60px;height:100%;background-color:transparent;box-shadow:unset;border-start-start-radius:var(--vxp-input-radius);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--vxp-input-radius)}.vxp-input__after{background-color:var(--vxp-input-after-bg-color);border-inline-start:0;border-start-start-radius:0;border-start-end-radius:var(--vxp-input-radius);border-end-end-radius:var(--vxp-input-radius);border-end-start-radius:0}.vxp-input__after--action{margin-inline-start:-1px;background-color:transparent}.vxp-input__after--action>.vxp-button{width:calc(100% + 2 * var(--vxp-input-h-padding));height:100%;border-start-start-radius:0;border-start-end-radius:var(--vxp-input-radius);border-end-end-radius:var(--vxp-input-radius);border-end-start-radius:0}.vxp-input__after--action>.vxp-button--icon-only{width:calc(var(--vxp-button-height) + 2 * var(--vxp-input-h-padding))}.vxp-input__after--action>.vxp-input-wrapper,.vxp-input__after--action>.vxp-number-input{width:calc(100% + 2 * var(--vxp-input-h-padding));height:100%;border-start-start-radius:0;border-start-end-radius:var(--vxp-input-radius);border-end-end-radius:var(--vxp-input-radius);border-end-start-radius:0}.vxp-input__after--action>.vxp-cascader{width:calc(100% + 2 * var(--vxp-input-h-padding));height:100%}.vxp-input__after--action>.vxp-cascader .vxp-cascader__selector{min-width:60px;height:100%;background-color:transparent;box-shadow:unset;border-start-start-radius:0;border-start-end-radius:var(--vxp-input-radius);border-end-end-radius:var(--vxp-input-radius);border-end-start-radius:0}.vxp-input__after--action>.vxp-color-picker{width:calc(100% + 2 * var(--vxp-input-h-padding));height:100%}.vxp-input__after--action>.vxp-color-picker .vxp-color-picker__selector{min-width:60px;height:100%;background-color:transparent;box-shadow:unset;border-start-start-radius:0;border-start-end-radius:var(--vxp-input-radius);border-end-end-radius:var(--vxp-input-radius);border-end-start-radius:0}.vxp-input__after--action>.vxp-date-picker{width:calc(100% + 2 * var(--vxp-input-h-padding));height:100%}.vxp-input__after--action>.vxp-date-picker .vxp-date-picker__selector{min-width:60px;height:100%;background-color:transparent;box-shadow:unset;border-start-start-radius:0;border-start-end-radius:var(--vxp-input-radius);border-end-end-radius:var(--vxp-input-radius);border-end-start-radius:0}.vxp-input__after--action>.vxp-select{width:calc(100% + 2 * var(--vxp-input-h-padding));height:100%}.vxp-input__after--action>.vxp-select .vxp-select__selector{min-width:60px;height:100%;background-color:transparent;box-shadow:unset;border-start-start-radius:0;border-start-end-radius:var(--vxp-input-radius);border-end-end-radius:var(--vxp-input-radius);border-end-start-radius:0}.vxp-input__after--action>.vxp-time-picker{width:calc(100% + 2 * var(--vxp-input-h-padding));height:100%}.vxp-input__after--action>.vxp-time-picker .vxp-time-picker__selector{min-width:60px;height:100%;background-color:transparent;box-shadow:unset;border-start-start-radius:0;border-start-end-radius:var(--vxp-input-radius);border-end-end-radius:var(--vxp-input-radius);border-end-start-radius:0}.vxp-input--transparent .vxp-input__after,.vxp-input--transparent .vxp-input__before{background-color:transparent}.vxp-color-picker-vars{--vxp-color-picker-marker-color:var(--vxp-content-color-humble);--vxp-color-picker-marker-b-color:var(--vxp-border-color-base);--vxp-color-picker-marker-border:var(--vxp-border-shape) var(--vxp-color-picker-marker-b-color);--vxp-color-picker-marker-radius:var(--vxp-radius-small);--vxp-color-picker-marker-bg-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==");--vxp-color-picker-arrow-color:var(--vxp-content-color-secondary);--vxp-color-picker-pane-bg-color:var(--vxp-bg-color-base);--vxp-color-picker-pane-radius:var(--vxp-radius-base);--vxp-color-picker-pane-shadow:var(--vxp-shadow-base);--vxp-color-picker-unit-s-color:var(--vxp-color-primary-opacity-6);--vxp-color-picker-d-color:var(--vxp-border-color-light-2);--vxp-color-picker-divider:var(--vxp-border-shape) var(--vxp-color-picker-d-color);--vxp-color-picker-pointer-size:6px;--vxp-color-picker-handler-size:6px;--vxp-color-picker-handler-bg-color:var(--vxp-color-white);--vxp-color-picker-handler-b-color:var(--vxp-border-color-base);--vxp-color-picker-handler-border:var(--vxp-border-shape) var(--vxp-color-picker-handler-b-color);--vxp-color-picker-handler-radius:3px;--vxp-color-picker-shortcut-b-color:var(--vxp-border-color-base);--vxp-color-picker-shortcut-b-color-hover:var(--vxp-color-primary-base);--vxp-color-picker-shortcut-radius:var(--vxp-radius-base);--vxp-color-picker-shortcut-width:20px;--vxp-color-picker-shortcut-height:16px}.vxp-color-picker{font-family:var(--vxp-font-family-base);font-size:var(--vxp-font-size-base);font-variant-numeric:tabular-nums;line-height:var(--vxp-line-height-base);color:var(--vxp-content-color-base);display:inline-flex}.vxp-color-picker,.vxp-color-picker *,.vxp-color-picker ::after,.vxp-color-picker ::before{box-sizing:border-box}.vxp-color-picker--inherit{font-family:inherit;font-size:inherit;font-variant-numeric:inherit;line-height:inherit}.vxp-color-picker__selector{position:relative;display:inline-flex;align-items:center;width:100%;height:var(--vxp-input-height);padding:var(--vxp-input-v-padding) var(--vxp-input-h-padding);cursor:text;background-color:var(--vxp-input-bg-color);border:var(--vxp-border-shape) var(--vxp-input-b-color);border-radius:var(--vxp-input-radius);outline:0;transition:var(--vxp-transition-background),var(--vxp-transition-border),var(--vxp-transition-shadow)}.vxp-color-picker__selector:hover{border-color:var(--vxp-input-b-color-hover)}.vxp-color-picker__selector--focused,.vxp-color-picker__selector:focus,.vxp-color-picker__selector:focus-within{z-index:2;border-color:var(--vxp-input-b-color-focus);box-shadow:var(--vxp-shadow-focus) var(--vxp-input-s-color-focus)}.vxp-color-picker__selector--small{--vxp-input-height:24px;--vxp-input-v-padding:1px}.vxp-color-picker__selector--large{--vxp-input-height:40px;--vxp-input-v-padding:7px}.vxp-color-picker__selector.vxp-color-picker__selector--success{--vxp-input-b-color:var(--vxp-color-success-light-1);--vxp-input-b-color-hover:var(--vxp-color-success-light-1);--vxp-input-s-color-focus:var(--vxp-color-success-opacity-6)}.vxp-color-picker__selector.vxp-color-picker__selector--error{--vxp-input-b-color:var(--vxp-color-error-light-1);--vxp-input-b-color-hover:var(--vxp-color-error-light-1);--vxp-input-s-color-focus:var(--vxp-color-error-opacity-6)}.vxp-color-picker__selector.vxp-color-picker__selector--warning{--vxp-input-b-color:var(--vxp-color-warning-light-1);--vxp-input-b-color-hover:var(--vxp-color-warning-light-1);--vxp-input-s-color-focus:var(--vxp-color-warning-opacity-6)}.vxp-color-picker__selector--readonly{cursor:auto}.vxp-color-picker__selector--transparent{background-color:transparent}.vxp-color-picker__selector--transparent,.vxp-color-picker__selector--transparent--focused,.vxp-color-picker__selector--transparent:focus,.vxp-color-picker__selector--transparent:focus-within,.vxp-color-picker__selector--transparent:hover{border-color:transparent;box-shadow:unset}.vxp-color-picker__selector--disabled{cursor:not-allowed;background-color:var(--vxp-input-bg-color-disabled)}.vxp-color-picker__selector--disabled,.vxp-color-picker__selector--disabled:focus,.vxp-color-picker__selector--disabled:focus-within,.vxp-color-picker__selector--disabled:hover{border-color:var(--vxp-border-color-base);box-shadow:none}.vxp-color-picker__selector--disabled .vxp-color-picker__control,.vxp-color-picker__selector--disabled .vxp-color-picker__icon{color:var(--vxp-input-control-color-disabled);pointer-events:none;cursor:not-allowed}.vxp-color-picker__selector--disabled.vxp-color-picker__selector--focused{border-color:var(--vxp-border-color-base);box-shadow:none}.vxp-color-picker__control{flex:1 0 0;min-width:0;height:100%;padding:0;font-size:inherit;line-height:var(--vxp-input-line-height);color:var(--vxp-input-control-color);background-color:transparent;border:0;border-radius:var(--vxp-input-radius);outline:0;transition:var(--vxp-transition-color)}.vxp-color-picker__control:disabled{cursor:not-allowed}.vxp-color-picker__control::-moz-placeholder{color:var(--vxp-input-placeholder-color)}.vxp-color-picker__control::placeholder{color:var(--vxp-input-placeholder-color)}.vxp-color-picker__control::-ms-clear,.vxp-color-picker__control::-ms-reveal{display:none}.vxp-color-picker__selector--readonly .vxp-color-picker__control{cursor:auto}.vxp-color-picker__icon{display:flex;align-items:center;justify-content:center;height:100%;color:var(--vxp-input-icon-color);-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxp-color-picker__icon--placeholder{min-width:14px;min-height:1px;margin-inline-start:4px;visibility:hidden;opacity:0}.vxp-color-picker__prefix{margin-inline-end:4px}.vxp-color-picker__suffix{margin-inline-start:4px;transition:var(--vxp-transition-opacity)}.vxp-color-picker__clear{padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;background:0 0;border:0;outline:0}.vxp-color-picker__clear,.vxp-color-picker__loading{position:absolute;inset-inline-end:var(--vxp-input-h-padding);min-width:14px;margin-inline-start:4px;cursor:pointer}.vxp-color-picker__loading{pointer-events:none}.vxp-color-picker__selector{width:auto;cursor:pointer}.vxp-color-picker--disabled .vxp-color-picker__selector{cursor:not-allowed}.vxp-color-picker__control{display:flex;align-items:center}.vxp-color-picker__marker{display:flex;align-items:center;justify-content:center;width:calc(100% - 8px);min-width:40px;height:100%;margin-inline-end:8px;overflow:hidden;color:var(--vxp-color-picker-marker-color);border:var(--vxp-color-picker-marker-border);border-radius:var(--vxp-color-picker-marker-radius)}.vxp-color-picker__marker--with-label{width:24px;min-width:24px}.vxp-color-picker--alpha .vxp-color-picker__marker{background-image:var(--vxp-color-picker-marker-bg-image)}.vxp-color-picker--empty .vxp-color-picker__marker{background-image:none}.vxp-color-picker__label{display:flex;margin-inline-end:6px;line-height:1;white-space:nowrap}.vxp-color-picker__arrow{display:flex;align-items:center;justify-content:center;height:100%;color:var(--vxp-color-picker-arrow-color);transition:var(--vxp-transition-transform)}.vxp-color-picker--focused .vxp-color-picker__arrow{transform:rotate(180deg)}.vxp-color-picker__panel{width:270px;background-color:var(--vxp-color-picker-pane-bg-color);border-radius:var(--vxp-color-picker-pane-radius);box-shadow:var(--vxp-color-picker-pane-shadow)}.vxp-color-picker__section{width:100%;padding:8px 8px 0}.vxp-color-picker__palette{position:relative;width:100%;height:188px;cursor:crosshair;outline:0;transition:var(--vxp-transition-shadow)}.vxp-color-picker__palette:focus{box-shadow:var(--vxp-shadow-focus) var(--vxp-color-picker-unit-s-color)}.vxp-color-picker__opacity,.vxp-color-picker__saturation,.vxp-color-picker__value{position:absolute;inset:0;width:100%;height:100%}.vxp-color-picker__saturation{background:linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.vxp-color-picker__value{background:linear-gradient(0deg,#000,transparent)}.vxp-color-picker__alpha,.vxp-color-picker__hue{position:relative;width:100%;height:14px;margin-top:10px;cursor:pointer;outline:0;transition:var(--vxp-transition-shadow)}.vxp-color-picker__alpha:focus,.vxp-color-picker__hue:focus{box-shadow:var(--vxp-shadow-focus) var(--vxp-color-picker-unit-s-color)}.vxp-color-picker__hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.vxp-color-picker__alpha{background-image:var(--vxp-color-picker-marker-bg-image)}.vxp-color-picker__action{display:flex;align-items:center;justify-content:flex-end;padding:8px;margin-top:10px;border-top:var(--vxp-color-picker-divider)}.vxp-color-picker__action .vxp-button{margin-inline-start:4px!important}.vxp-color-picker__action .vxp-input{width:100%}.vxp-color-picker__palette-handler{position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none;border:var(--vxp-border-shape) var(--vxp-color-black);border-radius:50%;transform:translate(-50%,-50%)}.vxp-color-picker__palette-pointer{width:var(--vxp-color-picker-pointer-size);height:var(--vxp-color-picker-pointer-size);border:var(--vxp-border-shape) var(--vxp-color-white);border-radius:50%}.vxp-color-picker__alpha-handler,.vxp-color-picker__hue-handler{position:absolute;top:0;bottom:0;width:var(--vxp-color-picker-handler-size);background-color:var(--vxp-color-picker-handler-bg-color);border:var(--vxp-color-picker-handler-border);border-radius:var(--vxp-color-picker-handler-radius);transform:translateX(-50%)}.vxp-color-picker__shortcuts{display:flex;flex-wrap:wrap;align-items:center;width:100%;margin-top:10px;outline:0}.vxp-color-picker__shortcut-item{width:var(--vxp-color-picker-shortcut-width);height:var(--vxp-color-picker-shortcut-height);margin:4px;cursor:pointer;border-radius:var(--vxp-color-picker-shortcut-radius);box-shadow:var(--vxp-shadow-border) var(--vxp-color-picker-shortcut-b-color);transition:box-shadow .2s}.vxp-color-picker__shortcut-item:hover{box-shadow:0 0 2px 2px var(--vxp-color-picker-shortcut-b-color-hover)}.vxp-color-picker__shortcut-item--hitting{box-shadow:0 0 2px 2px var(--vxp-color-picker-shortcut-b-color-hover)}.vxp-color-picker__input{flex:1 0 0;width:auto;min-width:0}.vxp-color-picker__clear{padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;background:0 0;border:0;outline:0}