.color-picker-property__helper{margin-block:calc(var(--spacing-0-5) * -1) var(--spacing-1);line-height:1.4}.color-picker-property__control{display:flex;align-items:center;gap:var(--spacing-1, .5rem);margin-block-start:var(--spacing-1)}.color-picker-property__trigger{display:inline-flex;align-items:center;gap:var(--spacing-2, 1rem);flex:1 1 auto;min-width:0;height:3.5rem;padding:0 var(--spacing-2, .75rem);font-family:inherit;font-size:var(--text-sm, .875rem);text-align:start;color:rgba(var(--text-color),1);background-color:rgba(var(--input-background),1);border:var(--input-border-width, 1px) solid rgba(var(--text-color),.2);border-radius:var(--input-border-radius, 0);cursor:pointer;transition:border-color .2s ease}.color-picker-property__trigger:hover{border-color:rgba(var(--text-color),.5)}.color-picker-property__trigger:focus-visible{outline:2px solid rgba(var(--text-color),1);outline-offset:2px}.color-picker-property__trigger-text{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.color-picker-property__trigger-icon{display:inline-flex;flex-shrink:0;color:rgba(var(--text-color),.5)}.color-picker-property__swatch{display:block;flex-shrink:0;width:2.5rem;height:2.5rem;border-radius:calc(var(--input-border-radius, 0) * .5);border:1px solid rgba(var(--text-color),.15);background-image:linear-gradient(45deg,#d4d4d4 25%,transparent 25%),linear-gradient(-45deg,#d4d4d4 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d4d4d4 75%),linear-gradient(-45deg,transparent 75%,#d4d4d4 75%);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0px}.color-picker-property__swatch[data-has-color=true]{background-image:none}.color-picker-property__reset{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:2rem;height:2rem;padding:0;border:0;background:transparent;color:rgba(var(--text-color),.6);cursor:pointer;border-radius:50%;transition:background-color .2s ease,color .2s ease}.color-picker-property__reset:hover{background-color:rgba(var(--text-color),.08);color:rgba(var(--text-color),1)}.color-picker-property__reset[hidden],.color-picker-property__popup[hidden]{display:none}.color-picker-property__popup{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:var(--spacing-3, 1rem)}.color-picker-property__backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background-color:#00000080;animation:color-picker-fade .18s ease}.color-picker-property__dialog{position:relative;width:100%;max-width:22rem;max-height:calc(100dvh - 2rem);overflow-y:auto;padding:var(--spacing-4, 1.25rem);background-color:rgb(var(--background, 255 255 255));color:rgba(var(--text-color),1);border-radius:min(var(--block-border-radius, 12px),20px);box-shadow:0 24px 60px #00000047;animation:color-picker-pop .2s ease}@keyframes color-picker-fade{0%{opacity:0}to{opacity:1}}@keyframes color-picker-pop{0%{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.color-picker-property__dialog-header{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-2, 1rem);margin-block-end:var(--spacing-3, 1rem)}.color-picker-property__dialog-title{font-size:var(--text-base, 1rem);font-weight:600}.color-picker-property__close{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin:-.25rem -.5rem -.25rem 0;padding:0;border:0;background:transparent;color:rgba(var(--text-color),.6);cursor:pointer;border-radius:50%;transition:background-color .2s ease,color .2s ease}.color-picker-property__close:hover{background-color:rgba(var(--text-color),.08);color:rgba(var(--text-color),1)}.color-picker-property__preview{display:flex;align-items:flex-end;justify-content:flex-end;height:5.5rem;padding:var(--spacing-2, .75rem);margin-block-end:var(--spacing-3, 1rem);border-radius:12px;border:1px solid rgba(var(--text-color),.12);background-image:linear-gradient(45deg,#d4d4d4 25%,transparent 25%),linear-gradient(-45deg,#d4d4d4 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d4d4d4 75%),linear-gradient(-45deg,transparent 75%,#d4d4d4 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px}.color-picker-property__preview-hex{padding:.15rem .5rem;font-size:var(--text-sm, .875rem);font-weight:600;letter-spacing:.04em;border-radius:6px;background-color:#ffffffd9;color:#1a1a1a;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.color-picker-property__sv{position:relative;width:100%;height:9rem;margin-block-end:var(--spacing-3, 1rem);border-radius:10px;cursor:crosshair;touch-action:none;background-image:linear-gradient(to top,#000,#0000),linear-gradient(to right,#fff,#fff0)}.color-picker-property__sv:focus-visible{outline:2px solid rgba(var(--text-color),1);outline-offset:2px}.color-picker-property__sv-thumb{position:absolute;top:0;left:0;width:18px;height:18px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #0006;transform:translate(-50%,-50%);pointer-events:none}.color-picker-property__hue{position:relative;width:100%;height:1rem;margin-block-end:var(--spacing-3, 1rem);border-radius:999px;cursor:pointer;touch-action:none;background:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}.color-picker-property__hue:focus-visible{outline:2px solid rgba(var(--text-color),1);outline-offset:2px}.color-picker-property__hue-thumb{position:absolute;top:50%;left:0;width:18px;height:18px;border-radius:50%;background-color:#fff;border:2px solid #fff;box-shadow:0 0 0 1px #0006,0 1px 3px #0000004d;transform:translate(-50%,-50%);pointer-events:none}.color-picker-property__modes{display:flex;gap:2px;padding:3px;margin-block-end:var(--spacing-2, .5rem);border-radius:8px;background-color:#f1f0ec;border:1px solid #e4e3dd}.color-picker-property__mode{flex:1 1 0;padding:6px 4px;border:0;border-radius:6px;background:transparent;font-family:inherit;font-size:12px;font-weight:600;letter-spacing:.02em;color:rgba(var(--text-color),.6);cursor:pointer;transition:background-color .15s ease,color .15s ease}.color-picker-property__mode:hover{color:rgba(var(--text-color),.9)}.color-picker-property__mode.is-active{background-color:#fff;color:#20221e;box-shadow:0 1px 3px #00000024}.color-picker-property__mode:focus-visible{outline:2px solid rgba(var(--text-color),1);outline-offset:1px}.color-picker-property__nearest{padding:0;border:0;background:transparent;font-family:inherit;font-size:inherit;font-weight:600;color:rgba(var(--text-color),.9);text-decoration:underline;text-underline-offset:2px;cursor:pointer}.color-picker-property__input-wrapper{position:relative}.color-picker-property__hex-row{display:flex;align-items:center;gap:var(--spacing-1-5, .75rem)}.color-picker-property__formats{margin-block-start:var(--spacing-2, .5rem);font-size:11px;line-height:1.5;color:rgba(var(--text-color),.6)}.color-picker-property__formats strong{font-weight:600;color:rgba(var(--text-color),.85);white-space:nowrap}.color-picker-property__suggestions{position:absolute;inset-inline:0;top:calc(100% + 4px);z-index:5;max-height:13rem;overflow-y:auto;padding:4px;border-radius:8px;border:1px solid rgba(var(--text-color),.15);background-color:rgb(var(--background, 255 255 255));box-shadow:0 10px 24px #00000024}.color-picker-property__suggestions[hidden]{display:none}.color-picker-property__suggestion{display:flex;align-items:center;gap:var(--spacing-2, .5rem);width:100%;padding:6px 8px;border:0;border-radius:6px;background:transparent;font-family:inherit;font-size:12px;text-align:start;color:rgba(var(--text-color),1);cursor:pointer}.color-picker-property__suggestion:hover,.color-picker-property__suggestion:focus-visible{background-color:rgba(var(--text-color),.07)}.color-picker-property__suggestion-swatch{flex-shrink:0;width:1rem;height:1rem;border-radius:4px;border:1px solid rgba(var(--text-color),.2)}.color-picker-property__input-label{display:block;margin-block-end:6px;font-size:12px;font-weight:600;color:rgba(var(--text-color),.75)}.color-picker-property__hex{flex:1 1 auto;min-width:0;height:2.75rem;padding:0 12px;font-family:inherit;font-size:16px;letter-spacing:.04em;text-transform:uppercase;border:1.5px solid #c9cec0;border-radius:8px;background-color:#fff;color:rgba(var(--text-color),1);box-shadow:inset 0 1px 2px #0000000a;transition:border-color .15s ease,box-shadow .15s ease}.color-picker-property__hex:hover{border-color:#9aa38c}.color-picker-property__hex::placeholder{color:#8a8d84;text-transform:none;letter-spacing:0;opacity:1}.color-picker-property__hex:focus{outline:none;border-color:#4d8c1f;box-shadow:0 0 0 3px #4d8c1f2e}.color-picker-property__hex[aria-invalid=true]{border-color:#c20b5a;color:#c20b5a}.color-picker-property__hex[aria-invalid=true]:focus{box-shadow:0 0 0 3px #c20b5a26}.color-picker-property__apply{flex-shrink:0;height:2.75rem;padding:0 var(--spacing-3, 1.25rem);font-family:inherit;font-size:var(--text-sm, .875rem);font-weight:600;color:rgb(var(--primary-button-text-color, 255 255 255));background-color:rgb(var(--primary-button-background, 0 0 0));border:0;border-radius:var(--button-border-radius, 0);cursor:pointer;transition:opacity .2s ease}.color-picker-property__apply:hover{opacity:.85}body.color-picker-open{overflow:hidden}
/*# sourceMappingURL=/cdn/shop/t/13/assets/color-picker.css.map */