.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}.saturation{cursor:pointer;position:relative}.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}.color-type{display:flex;font-size:12px;margin-top:8px}.color-type .name{align-items:center;background:#252930;color:#999;display:flex;float:left;height:30px;justify-content:center;width:60px}.color-type .value{background:#2e333a;border:0;box-sizing:border-box;color:#fff;flex:1;height:30px;min-width:100px;padding:0 12px}.color-alpha{cursor:pointer;margin-left:8px;position:relative}.color-alpha .slide{background:#fff;box-shadow:0 0 1px #0000004d;height:4px;left:0;pointer-events:none;position:absolute;top:100px;width:100%}.sucker{background:#2e333a;cursor:pointer;fill:#9099a4;transition:all .3s;width:30px}.sucker.active,.sucker:hover{fill:#1593ff}.colors{margin:0;padding:0}.colors.history{border-top:1px solid #2e333a;margin-top:10px}.colors .item{border-radius:3px;box-sizing:border-box;cursor:pointer;display:inline-block;height:16px;margin:10px 0 0 10px;position:relative;transition:all .1s;vertical-align:top;width:16px}.colors .item:nth-child(8n+1){margin-left:0}.colors .item:hover{transform:scale(1.4)}.colors .item .alpha{border-radius:4px;height:100%}.colors .item .color{border-radius:3px;height:100%;left:0;position:absolute;top:0;width:100%}.hue{cursor:pointer;margin-left:8px;position:relative}.hue .slide{background:#fff;box-shadow:0 0 1px #0000004d;height:4px;left:0;pointer-events:none;position:absolute;top:100px;width:100%}.picker-layout[data-v-80ad6ad7]{align-items:stretch;display:flex;flex-direction:column;font-size:.9rem;font-weight:500;gap:12px}@media(min-width:768px){.picker-layout[data-v-80ad6ad7]{align-items:flex-start;flex-direction:row;font-size:1rem;gap:24px}}[data-v-80ad6ad7] .color-alpha,[data-v-80ad6ad7] .color-show,[data-v-80ad6ad7] .color-type,[data-v-80ad6ad7] .colors{display:none!important}[data-v-80ad6ad7] .hu-color-picker{background:transparent!important;box-shadow:none!important;padding:0!important;width:100%!important}[data-v-80ad6ad7] .saturation{border-radius:12px!important;overflow:hidden}[data-v-80ad6ad7] .hue{border-radius:10px!important;margin-left:10px!important;width:14px!important}@media(min-width:768px){[data-v-80ad6ad7] .hue{margin-left:16px!important;width:18px!important}}.hex-block[data-v-80ad6ad7]{align-items:center;display:flex;gap:10px}.hex-block span[data-v-80ad6ad7]{color:#9ca3af;font-size:.85rem}.hex-block input[data-v-80ad6ad7]{background:#f9fafb;border:2px solid #d1d5db;border-radius:12px;font-size:.9rem;font-weight:500;padding:8px 12px;width:100%}@media(min-width:768px){.hex-block input[data-v-80ad6ad7]{font-size:1rem;padding:10px 18px;width:140px}}