.lpx { --lpx-size: 36px; margin: 14px 0; }
.lpx__label { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.lpx__values { display: flex; flex-wrap: wrap; gap: 10px; }

.lpx__swatch { display: inline-flex; align-items: center; text-decoration: none; color: inherit; cursor: pointer; }
.lpx__dot {
  width: var(--lpx-size); height: var(--lpx-size); border-radius: 50%;
  border: 1px solid rgba(0,0,0,.18); display: inline-block; box-sizing: border-box;
  transition: transform .12s, box-shadow .12s;
}
.lpx--square .lpx__dot { border-radius: 4px; }
.lpx--rounded .lpx__dot { border-radius: 8px; }
.lpx__swatch:hover .lpx__dot { transform: scale(1.05); }
.lpx__swatch.is-current .lpx__dot { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #111; }

.lpx--button .lpx__dot { display: none; }
.lpx--button .lpx__text {
  display: inline-block; padding: 7px 14px; border: 1px solid #c9c9c9;
  border-radius: 18px; font-size: 13px; line-height: 1;
}
.lpx--button .lpx__swatch.is-current .lpx__text { border-color: #111; background: #111; color: #fff; }