.themeSwitch {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-right: calc(var(--spacer) / 4);
}

.themeSwitch svg {
  stroke: var(--text-color-light);
  width: 24px;
  height: 24px;
}

.themeSwitch:hover svg,
.themeSwitch:focus svg {
  stroke: var(--link-color);
}

.checkbox {
  position: relative;
  cursor: pointer;
  padding: calc(var(--spacer) / 2);
  display: block;
}

.themeSwitch [hidden] {
  display: none !important;
}

/* hide visually */
.checkbox [type='checkbox'],
.checkbox .label {
  width: 1px;
  height: 1px;
  border: 0;
  clip: rect(0 0 0 0);
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}