.diem-bg-switcher{
  position:relative;
  display:inline-flex;
  align-items:center;
}

/* Single cycle button (the only visible control) */
.diem-bg-switcher__toggle{
  /* easy to tweak */
  width:20px;
  height:20px;
  padding:0;
  border:0;
  border-radius:0;

  /* will be overridden inline by JS */
  background:#000;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;

  box-shadow:none;
  transition: transform .12s ease, filter .15s ease;
}

.diem-bg-switcher__toggle:hover{
  filter: brightness(1.03);
}
.diem-bg-switcher__toggle:active{
  transform: scale(.98);
}

.diem-bg-switcher__dot{
  width:12px;
  height:12px;
  border-radius:50%;

  /* JS will set the dot color to match the active background */
  background:#fff;
  border:0;

  box-sizing:border-box;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .diem-bg-switcher__toggle{
    transition:none;
  }
}