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

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

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

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

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

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