.colorpicker-component{position:relative;display:flex;align-items:stretch}.colorpicker-component input.form-control,.colorpicker-component input[type=text]{flex:1 1 auto;min-width:0}.colorpicker-component .input-group-addon{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 46px;padding:0 12px;border:1px solid var(--grey-lighter);border-left:0;background:var(--white);cursor:pointer;user-select:none}.colorpicker-component .input-group-addon:focus-visible{outline:2px solid var(--blue);outline-offset:2px}.colorpicker-component .input-group-addon i{display:block;width:18px;height:18px;border:1px solid var(--grey-lighter);border-radius:3px;background-color:var(--black)}.colorpicker-component.colorpicker-empty .input-group-addon i{background-color:var(--white);background-image:linear-gradient(45deg, var(--grey-lighter) 25%, transparent 25%),linear-gradient(-45deg, var(--grey-lighter) 25%, transparent 25%),linear-gradient(45deg, transparent 75%, var(--grey-lighter) 75%),linear-gradient(-45deg, transparent 75%, var(--grey-lighter) 75%);background-position:0 0,0 6px,6px -6px,-6px 0;background-size:12px 12px}.colorpicker-component .colorpicker-native-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.colorpicker-component input:disabled,.colorpicker-component .input-group-addon[tabindex="-1"]{cursor:not-allowed;opacity:.6}.colorpicker-fallback-panel{position:absolute;z-index:1100;display:none;width:240px;padding:12px;border:1px solid var(--grey-lighter);border-radius:12px;background:var(--white)}.colorpicker-fallback-panel.is-open{display:block}.colorpicker-fallback-preview,.colorpicker-fallback-actions{display:flex;align-items:center;gap:10px}.colorpicker-fallback-preview{margin-bottom:12px}.colorpicker-fallback-swatch{width:28px;height:28px;border:1px solid var(--grey-lighter);border-radius:6px;background:var(--white);flex:0 0 auto}.colorpicker-fallback-hex{width:100%;padding:8px 10px;border:1px solid var(--grey-lighter);border-radius:8px;font:inherit}.colorpicker-fallback-presets{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:8px;margin-bottom:12px}.colorpicker-fallback-preset,.colorpicker-fallback-clear,.colorpicker-fallback-apply{border:0;font:inherit;cursor:pointer}.colorpicker-fallback-preset{height:30px;border-radius:8px}.colorpicker-fallback-actions{justify-content:flex-end}.colorpicker-fallback-clear,.colorpicker-fallback-apply{padding:8px 10px;border-radius:8px;background:var(--white-off);color:var(--black);font-size:13px;font-weight:600}.colorpicker-fallback-apply{background:var(--blue);color:var(--white)}