.hu-color-picker{background:#1d2024;border-radius:4px;box-shadow:0 0 16px #00000029;padding:10px;z-index:1}.hu-color-picker.light{background:#f7f8f9}.hu-color-picker.light .color-show .sucker{background:#eceef0}.hu-color-picker.light .color-type .name{background:#e7e8e9}.hu-color-picker.light .color-type .value{background:#eceef0;color:#666}.hu-color-picker.light .colors.history{border-top:1px solid #eee}.hu-color-picker canvas{vertical-align:top}.hu-color-picker .color-set{display:flex}.hu-color-picker .color-show{display:flex;margin-top:8px}.hu-color-picker .saturation{cursor:pointer;position:relative}.hu-color-picker .saturation .slide{border:1px solid #fff;border-radius:50%;box-shadow:0 0 1px 1px #0000004d;height:10px;left:100px;pointer-events:none;position:absolute;top:0;width:10px}.hu-color-picker .color-alpha{cursor:pointer;margin-left:8px;position:relative}.hu-color-picker .color-alpha .slide{background:#fff;box-shadow:0 0 1px #0000004d;height:4px;left:0;pointer-events:none;position:absolute;top:100px;width:100%}.hu-color-picker .sucker{fill:#9099a4;background:#2e333a;cursor:pointer;transition:all .3s;width:30px}.hu-color-picker .sucker.active,.hu-color-picker .sucker:hover{fill:#1593ff}.hu-color-picker .hue{cursor:pointer;margin-left:8px;position:relative}.hu-color-picker .hue .slide{background:#fff;box-shadow:0 0 1px #0000004d;height:4px;left:0;pointer-events:none;position:absolute;top:100px;width:100%}.hu-color-picker .colors{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 0;padding:0}.hu-color-picker .colors.history{border-top:1px solid #2e333a;margin-top:10px}.hu-color-picker .colors .item{border-radius:3px;box-sizing:border-box;cursor:pointer;display:inline-block;height:16px;position:relative;transition:all .1s;vertical-align:top;width:16px}.hu-color-picker .colors .item:nth-child(8n+1){margin-left:0}.hu-color-picker .colors .item:hover{transform:scale(1.4)}.hu-color-picker .colors .item .alpha{border-radius:4px;height:100%}.hu-color-picker .colors .item .color{border-radius:3px;height:100%;left:0;position:absolute;top:0;width:100%}.hu-color-picker .color-type{display:flex;font-size:12px;margin-top:8px}.hu-color-picker .color-type .name{align-items:center;background:#252930;color:#999;display:flex;float:left;height:30px;justify-content:center;width:60px}.hu-color-picker .color-type .value{background:#2e333a;border:0;box-sizing:border-box;color:#fff;flex:1;height:30px;min-width:100px;padding:0 12px}.color-picker-input{display:inline-block;position:relative}.color-picker-input .color-picker-input--display{border-radius:var(--bs-border-radius);cursor:pointer;display:inline-block;font-family:monospace;font-size:12px;padding:4px 6px}.color-picker-input .color-picker-input--control-link{font-size:12px;padding:0 3px}.color-picker-input .hu-color-picker--wrapper{position:absolute;top:100%;z-index:10}.color-picker-input .hu-color-picker{box-sizing:content-box;display:flex;flex-direction:column}.color-picker-input .hu-color-picker>.color-show,.color-picker-input .hu-color-picker>.color-type{display:none}