.theme-picker{display:inline-flex;align-items:center;padding:0;margin:0;border:none;border-radius:0}.theme-picker,[data-theme=light] .theme-picker{background:transparent}.tp-accents{display:flex;gap:2px;align-items:center}.tp-swatch{position:relative;width:6px;height:6px;padding:4px;border-radius:50%;border:none;cursor:pointer;transition:transform .12s,box-shadow .12s;outline:none;flex-shrink:0;box-sizing:content-box;background:transparent}.tp-swatch:after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--swatch-color);box-shadow:inset 0 0 0 1px hsla(0,0%,100%,.3),0 0 0 1px rgba(0,0,0,.5);pointer-events:none;transition:transform .12s ease,box-shadow .12s ease}.tp-swatch:hover:after{transform:scale(1.22);transform-origin:center;box-shadow:inset 0 0 0 1px hsla(0,0%,100%,.55),0 0 0 1px rgba(0,0,0,.45)}.tp-swatch.active:after{box-shadow:inset 0 0 0 1px hsla(0,0%,100%,.95),0 0 0 1px rgba(0,0,0,.55),0 0 5px color-mix(in srgb,var(--swatch-color) 50%,transparent)}[data-theme=light] .tp-swatch:after{box-shadow:inset 0 0 0 1px rgba(0,0,0,.22),0 0 0 1px hsla(0,0%,100%,.85)}[data-theme=light] .tp-swatch:hover:after{box-shadow:inset 0 0 0 1px rgba(0,0,0,.35),0 0 0 1px hsla(0,0%,100%,.95)}[data-theme=light] .tp-swatch.active:after{box-shadow:inset 0 0 0 1px rgba(0,0,0,.5),0 0 0 1px #fff,0 0 4px color-mix(in srgb,var(--swatch-color) 40%,transparent)}