.palette-toggle-block {
  margin-right: auto;
}

.theme-toggle {
  display: none;
  width: 24px;
  height: 24px;
  margin-right: auto;
  padding: 0;
  cursor: pointer;
  color: currentColor;
  border: none;
  background: none;
}

.js .theme-toggle {
  display: inline-block;
}

.theme-toggle::before {
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  background-color: currentColor;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

/* DARK MODE → SUN */
html:not(.theme-light) .theme-toggle::before {
  -webkit-mask-image: url("../images/theme-light.svg");
  mask-image: url("../images/theme-light.svg");
}

/* LIGHT MODE → MOON */
html.theme-light .theme-toggle::before {
  -webkit-mask-image: url("../images/theme-dark.svg");
  mask-image: url("../images/theme-dark.svg");
}