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