.circle.svelte-1exkh3d{--bg-dark: linear-gradient(180deg, #50156b 0%, #3e127f 100%);--bg-light: #c09ff9;--bg-white: white;width:27px;height:27px;position:relative;transition:all;border-radius:50%;z-index:0;background:transparent}.circle[data-type=white].svelte-1exkh3d{box-shadow:0 0 3px #0006}.circle.svelte-1exkh3d:before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--bg-dark);filter:none;z-index:1;-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 1.5px),#fff 0);mask:radial-gradient(farthest-side,transparent calc(100% - 1.5px),#fff 0)}.circle[data-type=light].svelte-1exkh3d:before{background:var(--bg-light)}.circle[data-type=white].svelte-1exkh3d:before{background:var(--bg-white)}.circle.selected.svelte-1exkh3d:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;background:var(--bg-dark);width:calc(100% - 8px);height:calc(100% - 8px)}.circle.selected[data-type=light].svelte-1exkh3d:after{background:var(--bg-light)}.circle.selected[data-type=white].svelte-1exkh3d:after{background:var(--bg-white)}.circle.selected.wide[data-type=light].svelte-1exkh3d:after{width:calc(100% - 20px);height:calc(100% - 20px)}