Color Swatch Picker Input

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="swatch-input">
  <span class="swatch-input__dot is-active" style="--c:#ef4444"></span>
  <span class="swatch-input__dot" style="--c:#f59e0b"></span>
  <span class="swatch-input__dot" style="--c:#22c55e"></span>
  <span class="swatch-input__dot" style="--c:#38bdf8"></span>
  <span class="swatch-input__dot" style="--c:#a78bfa"></span>
</div>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.swatch-input {
  display: flex;
  gap: 12px;
}
.swatch-input__dot {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--c);
  cursor: pointer;
}
.swatch-input__dot.is-active::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px dotted var(--c);
  animation: swatch-spin 3s linear infinite;
}
@keyframes swatch-spin {
  100% { transform: rotate(360deg); }
}