.c3-color-picker{width:100%;position:relative}.c3-color-picker__trigger{background-color:var(--c3-color);border:var(--c3-border-width) solid var(--c3-color-border);border-radius:var(--c3-border-radius);color:var(--c3-color-text);cursor:pointer;font-family:var(--c3-font-family),sans-serif;align-items:center;gap:var(--c3-margin-small);width:100%;line-height:1.2;transition:border-color .15s;display:inline-flex}.c3-color-picker__trigger--sm{padding:.4rem .625rem;font-size:.8125rem}.c3-color-picker__trigger--md{padding:.625rem .875rem;font-size:.875rem}.c3-color-picker__trigger--lg{font-size:var(--c3-font-size-md);padding:.75rem var(--c3-margin)}.c3-color-picker__trigger--sm{min-height:2.025rem}.c3-color-picker__trigger--md{min-height:2.55rem}.c3-color-picker__trigger--lg{min-height:2.95rem}.c3-color-picker__trigger:focus-visible{border-color:var(--c3-color-info);outline:2px solid var(--c3-color-info);outline-offset:2px}.c3-color-picker__trigger--disabled{cursor:not-allowed;opacity:.65}.c3-color-picker__swatch{border:var(--c3-border-width) solid var(--c3-color-border);border-radius:var(--c3-border-radius-small);flex:none;width:1.125rem;height:1.125rem}.c3-color-picker--sm .c3-color-picker__swatch{width:.9375rem;height:.9375rem}.c3-color-picker--md .c3-color-picker__swatch{height:var(--c3-size-sm);width:var(--c3-size-sm)}.c3-color-picker__value{font-family:var(--c3-font-family),sans-serif;margin-inline-end:auto}.c3-color-picker__chevron{color:var(--c3-color-text-muted);flex:none}.c3-color-picker__panel{background-color:var(--c3-color-emphasis);border:var(--c3-border-width) solid var(--c3-color-border);border-radius:var(--c3-border-radius);box-shadow:0 .6px 1.7px rgba(var(--c3-color-shadow-rgb),.02),0 1.5px 4.3px rgba(var(--c3-color-shadow-rgb),.025),0 3px 8.9px rgba(var(--c3-color-shadow-rgb),.029),0 6.2px 18.3px rgba(var(--c3-color-shadow-rgb),.035),0 17px 50px rgba(var(--c3-color-shadow-rgb),.05);padding:var(--c3-margin);z-index:var(--c3-z-overlay);position:fixed}.c3-color-picker__native{margin-bottom:var(--c3-margin-xsmall);justify-content:center;display:flex}.c3-color-picker__native input[type=color]{border:var(--c3-border-width) solid var(--c3-color-border);border-radius:var(--c3-border-radius-small);cursor:pointer;background:0 0;width:6rem;height:3rem;padding:0}.c3-color-picker__presets{margin-bottom:var(--c3-margin-xsmall);flex-wrap:wrap;gap:.375rem;display:flex}.c3-color-picker__preset{border:var(--c3-border-width) solid var(--c3-color-border);border-radius:var(--c3-border-radius-small);cursor:pointer;width:1.5rem;height:1.5rem}.c3-color-picker__preset--active{outline:2px solid var(--c3-color-info);outline-offset:1px}.c3-color-picker__hex-input{background-color:var(--c3-color);border:var(--c3-border-width) solid var(--c3-color-border);border-radius:var(--c3-border-radius-small);box-sizing:border-box;color:var(--c3-color-text);font-family:var(--c3-font-family),sans-serif;text-transform:uppercase;width:100%;padding:.4rem .625rem;font-size:.8125rem}.c3-color-picker__hex-input:focus{border-color:var(--c3-color-info);outline:2px solid var(--c3-color-info);outline-offset:1px}.c3-color-picker__hex-input--invalid{border-color:var(--c3-color-danger)}.c3-color-picker-enter-active,.c3-color-picker-leave-active{transition:opacity .12s,transform .12s}.c3-color-picker-enter-from,.c3-color-picker-leave-to{opacity:0;transform:translateY(-var(--c3-margin-xsmall))}