.menu-swatch {
  position: relative;
  flex: 0 0 auto;
  width: var(--swatch-size, 30px);
  height: var(--swatch-size, 30px);
}

.menu-swatch-blob {
  --angle: calc(360deg / var(--n) * var(--i));

  position: absolute;
  top: calc(50% - var(--size) / 2 - var(--radius) * cos(var(--angle)));
  left: calc(50% - var(--size) / 2 + var(--radius) * sin(var(--angle)));
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  opacity: 0.7;
  background-image: conic-gradient(
    from 180deg at 50% 50%,
    var(--swatch-base),
    var(--swatch-accent),
    var(--swatch-base)
  );
  filter: blur(4px);
}

.menu-swatch--1 .menu-swatch-blob {
  top: calc(50% - var(--size) / 2);
  left: calc(50% - var(--size) / 2);
}