/* Heavily inspired by https://www.w3schools.com/howto/howto_css_switch.asp */
#theme-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 24px;
  flex-shrink: 0;

  & input {
    opacity: 0;
    width: 0;
    height: 0;

    &:focus + .slider {
      border-color: var(--color-ring);
    }

    &:checked + .slider::before {
      transform: translateX(24px);
    }

    &:checked + .slider::after {
      content: "☀";
      font-size: 18px;
      top: 1px;
      left: 5px;
      right: auto;
    }
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    padding: 2px;
    background-color: color-mix(in oklab, var(--color-bg) 70%, var(--color-fg));
    border: 1px solid var(--color-line);
    border-radius: 34px;
    transition: background-color 0.2s ease, border-color 0.2s ease;

    &::before {
      position: absolute;
      content: "";
      top: 1px;
      left: 1px;
      height: 20px;
      width: 20px;
      background-color: var(--color-paper);
      box-shadow: 0 1px 2px color-mix(in oklab, var(--color-fg) 22%, transparent);
      transition: transform 0.2s ease, background-color 0.2s ease;
      border-radius: 50%;
      background-color: var(--color-paper);
    }

    &::after {
      content: "🌙";
      position: absolute;
      top: 0;
      right: 3px;
      color: var(--color-link);
    }
  }
}