.color-picker{display:inline-flex;position:relative}.color-picker__trigger{align-items:center;background:transparent;border:var(--color-picker-trigger-border-width,var(--color-picker-trigger-border-width)) solid var(--color-picker-trigger-border-color-default,var(--color-picker-trigger-border-color-default));border-radius:var(--color-picker-trigger-radius,var(--color-picker-trigger-radius));cursor:pointer;display:flex;height:var(--color-picker-trigger-size-md,var(--color-picker-trigger-size-md));justify-content:center;padding:2px;transition:border-color .15s ease;width:var(--color-picker-trigger-size-md,var(--color-picker-trigger-size-md))}.color-picker__trigger:hover:not(:disabled),.color-picker__trigger[data-state~=hover]:not(:disabled){border-color:var(--color-picker-trigger-border-color-hover,var(--color-picker-trigger-border-color-hover))}.color-picker__trigger:focus,.color-picker__trigger[data-state~=focus]{border-color:var(--color-picker-trigger-border-color-focus,var(--color-picker-trigger-border-color-focus));outline:var(--color-picker-focus-ringWidth,var(--color-picker-focus-ringWidth)) solid var(--color-picker-focus-ringColor,var(--color-picker-focus-ringColor));outline-offset:var(--color-picker-focus-ringOffset,var(--color-picker-focus-ringOffset))}.color-picker__trigger:disabled{cursor:not-allowed;opacity:.5}.color-picker__preview{background-image:linear-gradient(45deg,#ccc 25%,transparent 0),linear-gradient(-45deg,#ccc 25%,transparent 0),linear-gradient(45deg,transparent 75%,#ccc 0),linear-gradient(-45deg,transparent 75%,#ccc 0);background-position:0 0,0 4px,4px -4px,-4px 0;background-size:8px 8px;border-radius:calc(var(--color-picker-trigger-radius, var(--color-picker-trigger-radius)) - 2px);height:100%;position:relative;width:100%}.color-picker__preview:after{background-color:inherit;border-radius:inherit;content:"";inset:0;position:absolute}.color-picker__panel{background-color:var(--color-picker-background,var(--color-picker-background));border:var(--color-picker-border-width,var(--color-picker-border-width)) solid var(--color-picker-border-color,var(--color-picker-border-color));border-radius:var(--color-picker-radius,var(--color-picker-radius));box-shadow:var(--color-picker-shadow,var(--color-picker-shadow));display:flex;flex-direction:column;gap:var(--color-picker-gap,var(--color-picker-gap));padding:var(--color-picker-padding,var(--color-picker-padding));width:var(--color-picker-width,var(--color-picker-width))}.color-picker__panel--mode-inline{box-shadow:none;position:relative}.color-picker__gradient{border-radius:var(--color-picker-gradient-radius,var(--color-picker-gradient-radius));cursor:crosshair;height:var(--color-picker-gradient-height,var(--color-picker-gradient-height));overflow:hidden;position:relative;width:100%}.color-picker__gradient:before{background:linear-gradient(90deg,#fff,transparent);content:"";inset:0;position:absolute}.color-picker__gradient:after{background:linear-gradient(0deg,#000,transparent);content:"";inset:0;position:absolute}.color-picker__gradient-pointer{border:var(--color-picker-slider-border-width,var(--color-picker-slider-border-width)) solid var(--color-picker-slider-border-color,var(--color-picker-slider-border-color));border-radius:50%;box-shadow:var(--color-picker-slider-shadow,var(--color-picker-slider-shadow));height:var(--color-picker-slider-size,var(--color-picker-slider-size));pointer-events:none;position:absolute;transform:translate(-50%,-50%);width:var(--color-picker-slider-size,var(--color-picker-slider-size));z-index:1}.color-picker__hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red);border-radius:var(--color-picker-hue-radius,var(--color-picker-hue-radius));cursor:pointer;height:var(--color-picker-hue-height,var(--color-picker-hue-height));position:relative;width:100%}.color-picker__hue-pointer{background:currentColor;border:var(--color-picker-slider-border-width,var(--color-picker-slider-border-width)) solid var(--color-picker-slider-border-color,var(--color-picker-slider-border-color));border-radius:50%;box-shadow:var(--color-picker-slider-shadow,var(--color-picker-slider-shadow));height:var(--color-picker-slider-size,var(--color-picker-slider-size));pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--color-picker-slider-size,var(--color-picker-slider-size))}.color-picker__input-wrapper{align-items:center;background-color:var(--color-picker-input-background,var(--color-picker-input-background));border:1px solid var(--color-picker-input-border-color,var(--color-picker-input-border-color));border-radius:var(--color-picker-input-radius,var(--color-picker-input-radius));display:flex;height:var(--color-picker-input-height,var(--color-picker-input-height));padding:0 var(--color-picker-input-padding-x,var(--color-picker-input-padding-x));transition:border-color .15s ease}.color-picker__input-wrapper:focus-within{border-color:var(--color-picker-focus-ringColor,var(--color-picker-focus-ringColor))}.color-picker__input-prefix{opacity:.5}.color-picker__input,.color-picker__input-prefix{color:var(--color-picker-input-text,var(--color-picker-input-text));font-family:monospace;font-size:var(--color-picker-input-fontSize,var(--color-picker-input-fontSize))}.color-picker__input{background:transparent;border:none;flex:1;padding:0;text-transform:uppercase}.color-picker__input:focus,.color-picker__input[data-state~=focus]{outline:none}.color-picker__presets{display:flex;flex-wrap:wrap;gap:var(--color-picker-preset-gap,var(--color-picker-preset-gap))}.color-picker__preset{background:transparent;border:var(--color-picker-preset-border-width,var(--color-picker-preset-border-width)) solid var(--color-picker-preset-border-color-default,var(--color-picker-preset-border-color-default));border-radius:var(--color-picker-preset-radius,var(--color-picker-preset-radius));cursor:pointer;height:var(--color-picker-preset-size,var(--color-picker-preset-size));padding:0;transition:all .15s ease;width:var(--color-picker-preset-size,var(--color-picker-preset-size))}.color-picker__preset:hover,.color-picker__preset[data-state~=hover]{transform:scale(1.1)}.color-picker__preset:focus,.color-picker__preset[data-state~=focus]{outline:var(--color-picker-focus-ringWidth,var(--color-picker-focus-ringWidth)) solid var(--color-picker-focus-ringColor,var(--color-picker-focus-ringColor));outline-offset:var(--color-picker-focus-ringOffset,var(--color-picker-focus-ringOffset))}.color-picker__preset--state-selected{border-color:var(--color-picker-preset-border-color-selected,var(--color-picker-preset-border-color-selected))}.color-picker--size-sm .color-picker__trigger{height:var(--color-picker-trigger-size-sm,var(--color-picker-trigger-size-sm));width:var(--color-picker-trigger-size-sm,var(--color-picker-trigger-size-sm))}.color-picker--size-md .color-picker__trigger{height:var(--color-picker-trigger-size-md,var(--color-picker-trigger-size-md));width:var(--color-picker-trigger-size-md,var(--color-picker-trigger-size-md))}.color-picker--size-lg .color-picker__trigger{height:var(--color-picker-trigger-size-lg,var(--color-picker-trigger-size-lg));width:var(--color-picker-trigger-size-lg,var(--color-picker-trigger-size-lg))}.color-picker--state-disabled .color-picker__trigger{cursor:not-allowed;opacity:.5}