@import url('/color-swatches.css');
.image-palette{position:fixed;z-index:8;display:flex;width:min(300px,calc(100vw - 104px));height:34px;gap:0;padding:5px 0;border:0;border-radius:4px;background:none;opacity:0;visibility:hidden;translate:0 6px;transition:opacity .18s ease,translate .18s ease,visibility 0s linear .18s}
.image-palette>span{height:24px;min-width:0;pointer-events:none}.image-palette>span:first-child{border-radius:4px 0 0 4px}.image-palette>span:last-child{border-radius:0 4px 4px 0}
.image-palette.is-visible{opacity:1;visibility:visible;translate:0 0;transition-delay:0s}.image-palette:focus-visible{outline:0;box-shadow:inset 0 -2px var(--ink)}
.image-palette-ring.appearance-swatch-item{position:fixed;z-index:9;flex:none;width:30px;height:30px;padding:0;margin:0;translate:-50% -50%;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease,visibility 0s linear .16s}
.image-palette-ring.is-visible{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
.image-palette-ring .appearance-swatch{position:relative;height:30px;border-radius:50%;border:0;background:transparent!important;box-shadow:none;cursor:copy}
.image-palette-ring .appearance-hex-copy{top:calc(100% + 6px)}
@media(pointer:coarse){.image-palette-ring.appearance-swatch-item,.image-palette-ring .appearance-swatch{width:44px;height:44px}}
@media(prefers-reduced-motion:reduce){.image-palette,.image-palette-ring.appearance-swatch-item{transition:none}}

.image-palette::after{content:"";position:absolute;inset:5px 0;border:1px solid #ffffff80;border-radius:4px;box-shadow:0 2px 10px #0007,0 0 0 1px #0005;pointer-events:none}
.image-palette-ring::after{content:"";position:absolute;top:100%;left:0;right:0;height:8px}
.image-palette-ring .appearance-hex-copy{display:flex;align-items:center;gap:9px;box-shadow:0 4px 14px #0005,0 1px 3px #0003}
.image-palette-ring .appearance-hex-copy::before{content:"";display:block;flex:none;width:26px;height:26px;border:1px solid #ffffff80;border-radius:4px;background:var(--sample-color);box-shadow:inset 0 0 0 1px #0002}

.image-palette-dismiss{position:fixed;z-index:9;display:grid;place-items:center;width:28px;height:28px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--panel);color:var(--ink);font:22px/1 Arial,sans-serif;box-shadow:0 2px 8px #0004;opacity:0;visibility:hidden;translate:0 5px;transition:opacity .16s ease,translate .16s ease,visibility 0s linear .16s}
.image-palette-dismiss.is-visible{opacity:1;visibility:visible;translate:0 0;transition-delay:0s}.image-palette-dismiss:focus-visible{outline:0;box-shadow:inset 0 0 0 1px var(--ink)}
@media(prefers-reduced-motion:reduce){.image-palette-dismiss{transition:none}}

.image-palette-ring .palette-ring-glass{position:absolute;left:50%;top:50%;translate:-50% -50%;width:20px;height:20px;border-radius:50%;pointer-events:none;--glass-color:240 240 240;--glass-opacity:.55;--glass-transmission:1;--glass-edge-transmission:0;--glass-fallback:#d8d8d8;--glass-fallback-ink:#202020;--glass-shade:rgba(0,0,0,.16)}
@media(pointer:coarse){.image-palette-ring .palette-ring-glass{width:28px;height:28px}}

.image-palette-ring.is-offscreen{opacity:0;visibility:hidden;pointer-events:none}.image-palette-ring.is-offscreen .appearance-hex-copy{visibility:hidden;pointer-events:none}

.palette-ring-outline{position:absolute;inset:0;z-index:2;border:1px solid #fff;border-radius:inherit;box-shadow:0 0 0 1px #000b,inset 0 0 0 1px #000b;pointer-events:none}
@media(prefers-reduced-transparency:reduce),(forced-colors:active){.image-palette-ring .palette-ring-glass{background:transparent!important;border:3px solid CanvasText!important}}