:host{--_swatch-bg: var(--osg-swatch-bg, var(--osg-blue));cursor:pointer;container-type:inline-size;color-scheme:inherit}:host(:focus-visible){outline:none}:host(:focus-visible) .swatch{box-shadow:0 0 0 4px light-dark(#fff, #1b1b1b);outline:2px solid light-dark(#1b1b1b, #fff);outline-offset:2px}.swatch{display:grid;position:relative;align-content:end;min-width:var(--osg-swatch-min-width, max-content);min-height:var(--osg-swatch-min-height, 9ex);padding:1ex;font-size:clamp(9px, 9cqi, 16px);border:2px solid light-dark(var(--black-transparent-10), var(--white-transparent-10));border-radius:var(--osg-swatch-border-radius, 1ex);background:var(--_swatch-bg);transition:transform 0.12s var(--cubic-bezier, ease),box-shadow 0.12s var(--cubic-bezier, ease);font-variant-numeric:tabular-nums}:host(:not(:state(no-value))) .swatch:hover{box-shadow:0 4px 10px light-dark(var(--black-transparent-20, rgba(0,0,0,0.2)), rgba(0,0,0,0.5));transform:translateY(-2px)}.popover{max-width:max-content;margin:0;padding:0.5ex 1ex;font-weight:600;font-size:0.75rem;white-space:nowrap;color:#ffffff;border:0;border-radius:0.5ex;background:rgba(0,0,0,0.85);box-shadow:0 2px 8px rgba(0,0,0,0.3)}.popover:popover-open{inset:auto;bottom:anchor(top);justify-self:anchor-center;margin-bottom:0.75ex}.popover.is-visible{position:absolute;bottom:calc(100% + 0.75ex);left:50%;translate:-50% 0}.sr-only{position:absolute;overflow:hidden;clip:rect(0, 0, 0, 0);width:1px;height:1px;margin:-1px;padding:0;white-space:nowrap;border:0}:host([muted]) .swatch{opacity:0.2;transition:opacity 0.15s var(--cubic-bezier, ease)}:host([muted]) .swatch:hover,:host([muted]:focus-visible) .swatch{opacity:1}.name,.value{line-height:1.15;text-shadow:0 0 2px rgba(0,0,0,0.9),0 0 1px rgba(0,0,0,0.9);overflow-wrap:anywhere;color:#ffffff}.name{font-weight:600}.value{opacity:0.85}@supports (color: contrast-color(white)){.name,.value{text-shadow:none;color:contrast-color(var(--_swatch-bg))}}:host(:state(no-value)) .value{display:none}:host([value="transparent" i]) .name,:host([value="transparent" i]) .value{text-shadow:none;color:currentColor}@supports (color: contrast-color(white)){:host([translucent]) .name,:host([translucent]) .value{width:fit-content;padding:0 0.4ex;border-radius:0.4ex;background:contrast-color(currentColor)}}