.dark_mode_container {
  align-items: stretch;
  cursor: pointer;
  display: flex;
  flex-flow: row nowrap;
  gap: 0.25rem;
  justify-content: flex-end;
}
.dark_mode_container > div {
  align-items: center;
  display: flex;
}
.dark_mode_container svg {
  aspect-ratio: 1/1;
  filter: var(--dark-mode-switcher-filter);
  width: 1rem;
}

.dark_mode_switcher {
  appearance: none;
  background: #191616;
  border-radius: 1rem;
  cursor: pointer;
  height: 1rem;
  outline: none;
  position: relative;
  transition: 0.5s;
  width: 2rem;
}
.dark_mode_switcher::before {
  background: linear-gradient(to bottom, #fff, #f5f5f5);
  border-radius: 1rem;
  content: "";
  height: 1rem;
  left: 0;
  position: absolute;
  top: 0;
  transform: scale(0.9);
  transition: 0.5s;
  width: 1rem;
}
.dark_mode_switcher:checked {
  background: #fff;
  box-shadow: inset 0 0.125rem 1rem rgba(0, 0, 0, 0.1), inset 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1), inset 0 -0.25rem 0.25rem rgba(0, 0, 0, 0.05);
}
.dark_mode_switcher:checked::before {
  left: 1rem;
  background: linear-gradient(to bottom, #191616, #222);
}