.KColorPicker{width:100%;font-size:16px;line-height:30px}.KColorPicker .color_trigger{box-sizing:border-box;width:100%;height:40px;font:inherit;border:2px solid #0000;padding:0 12px 0 4px;position:relative}.KColorPicker .color_trigger:focus-visible{border-color:var(--main-color);outline:none}.KColorPicker .color_trigger.disabled,.KColorPicker .color_trigger.readonly{cursor:not-allowed;opacity:.55}.KColorPicker .color_swatch{box-sizing:border-box;width:28px;height:28px;box-shadow:0 0 0 1px var(--border-light-color);border:2px solid #fff;border-radius:50%;flex:0 0 28px}.KColorPicker .color_text.unset{color:var(--text-sub-color);font-family:inherit}.KColorPicker .color_text{min-width:0;color:var(--text-color);text-align:center;flex:1;justify-content:center;align-self:stretch;align-items:center;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;display:flex}.KColorPicker .color_icon{pointer-events:none;width:30px;height:30px;color:var(--text-sub-color-opaque);border-radius:50%;flex:0 0 30px;justify-content:center;align-items:center;display:flex;position:absolute;top:50%;right:12px;transform:translateY(-50%)}.KColorPicker .color_icon svg{fill:none;width:18px;height:18px;color:inherit;transform:rotate(-90deg)}.color_dialog{box-sizing:border-box;width:min(420px,100vw - 48px);padding:4px 2px}.color_dialog .color_preview_row{grid-template-columns:40px minmax(0,1fr);gap:10px;margin-bottom:14px;display:grid}.color_dialog .color_preview{box-sizing:border-box;width:40px;height:40px;box-shadow:0 0 0 1px var(--border-light-color);border:2px solid #fff;border-radius:50%}.color_dialog .color_hex_input{text-transform:uppercase;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.color_dialog .hue_panel,.color_dialog .saturation_panel{box-sizing:border-box;cursor:crosshair;touch-action:none;outline:none;position:relative}.color_dialog .hue_panel:focus-visible,.color_dialog .saturation_panel:focus-visible{outline:2px solid var(--main-color);outline-offset:4px}.color_dialog .saturation_panel{border-radius:var(--border-radius);background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent),var(--hue-color);background-repeat:no-repeat;border:none;height:220px}.color_dialog .color_cursor,.color_dialog .hue_cursor{pointer-events:none;border:2px solid #fff;position:absolute;transform:translate(-50%,-50%);box-shadow:0 1px 5px #0009}.color_dialog .color_cursor{border-radius:50%;width:18px;height:18px}.color_dialog .hue_panel{background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red);border-radius:9px;height:18px;margin-top:14px}.color_dialog .hue_cursor{background:0 0;border-radius:5px;width:8px;height:24px;top:50%}.color_dialog .button_container{grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:10px;margin-top:24px;display:grid}.color_dialog .button_container>button{width:100%;min-width:0;margin-left:0}@media (width<=480px){.color_dialog .saturation_panel{height:190px}}