/* Light/Dark mode style */

.dark-label {
  user-select   : none;
  font-size     : 9px;
  padding-left  : 4px;
  padding-top   : 2px;
  margin-top    : 1.5em;
  margin-bottom : 1.5em;
}

.dark-label .dark {
  padding-right : 5px;
  color : var(--st-color-1);
}

.dark-label .light {
  color : var(--st-color-9);
}

input[type=checkbox].dark-mode {
  height     : 0;
  width      : 0;
  visibility : hidden;
}

.dark-label {
  cursor     : pointer;
  width      : 52px;
  height     : 22px;
  background : var(--st-color-4);
  float      : left;
  position   : relative;
  left       : 24px;
}

.dark-label:after {
  content    : '';
  position   : absolute;
  top        : 3px;
  left       : 3px;
  width      : 22px;
  height     : 16px;
  background : #fff;
  transition : 0.3s;
}

.dark-mode:checked + label {
  background : var(--st-color-6);
}

.dark-mode:checked + label:after {
  left      : calc(100% - 5px);
  transform : translateX(-100%);
}