.color-button {
  padding: 0;
  border-radius: 999px;
  outline-offset: 1px;
  border: none;
  transition: all 200ms ease-out;
}

.color-button image {
  margin-top: 22px;
  margin-left: 22px;
  padding: 2px;
  border-radius: 999px;
  color: transparent;
  background: transparent;
  transition: all 200ms ease-out;
}

.color-button:checked image {
  color: @theme_selected_fg_color;
  background: @theme_selected_bg_color;
}

.color-light {
  background: #ffffff;
  box-shadow: inset 0 0 0 1px alpha(black, .35);
}

.color-light:checked {
  box-shadow: inset 0 0 0 2px @theme_selected_bg_color;
}

.color-dark {
  background: #2d2d2d;
  box-shadow: inset 0 0 0 1px alpha(white, .35);
}
.color-dark:checked {
  box-shadow: inset 0 0 0 2px @theme_selected_bg_color;
}

.color-sepia {
  background: #f0e8dd;
  box-shadow: inset 0 0 0 1px alpha(black, .35);
}

.color-sepia:checked {
  box-shadow: inset 0 0 0 2px @theme_selected_bg_color;
}

.color-system {
  background: linear-gradient(135deg, #ffffff 0%, #ffffff 49%, #2d2d2d 51%, #2d2d2d 100%);;
  box-shadow: inset 0 0 0 1px alpha(black, .35);
}

.color-system:checked {
  box-shadow: inset 0 0 0 2px @theme_selected_bg_color;
}

