/*adapted from: https://codepen.io/antlio/pen/LYVVXLJ*/

:root {
  --bg-planet-bright: #F2C94C;
  --bg-planet-shadow: #828894;
  --bg-planet-lightshadow: #D7D7D820;
  --dot-size: 0.25rem;
}

/*color transitions*/
*{
    transition: background-color 400ms ease;
  }


div[class=theme_switch] label {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;

      cursor: pointer;
      padding: 1rem;
      position: absolute;

      /* To make outline on mobile invisible */
      -webkit-tap-highlight-color:  rgba(255, 255, 255, 0);
    }

div[class=theme_switch] label input[type="checkbox"] {
          height: 0;
          width: 0;
          visibility: hidden;
          position: absolute;
      }

div[class=theme_switch] label .planet {
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        overflow: hidden;
        background:
          radial-gradient(3.75em, 99%, transparent 100%);
        background-color: var(--bg-planet-bright);
        background-repeat: no-repeat;
        position: relative;
        will-change: background;
        transition: all 400ms ease;

        /* Safari transition issue */
        -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
        transform: translate3d(0, 0, 0);
      }

div[class=theme_switch] label .planet::after {
          content: "";
          background-color: var(--bg-planet-shadow);
          width: 2rem;
          height: 2rem;
          position: absolute;
          border-radius: 50%;
          will-change: opacity, transform, background-color;
          opacity: 0;
          transform: translate(2em, -2em);
          transition: opacity 400ms ease, transform 400ms ease, background-color 400ms ease;
        }

div[class=theme_switch] label .elements {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        transition: transform 400ms ease;
      }

div[class=theme_switch] label .elements svg {
          position: absolute;
          width: 6px;
          height: 6px;
          opacity: 1;
          transition: transform 400ms ease, opacity 200ms ease, width 200ms ease, height 200ms ease;
        }

div[class=theme_switch] label .elements svg circle {
            fill: var(--bg-planet-bright);
            transition: fill 400ms ease;
          }

div[class=theme_switch] label .elements svg:first-child {
            transform: translate(1.8em, 0.35em);
          }

div[class=theme_switch] label .elements svg:nth-child(2) {
            transform: translate(2.8em, 0.7em);
          }

div[class=theme_switch] label .elements svg:nth-child(3) {
            transform: translate(3.2em, 1.8em);
          }

div[class=theme_switch] label .elements svg:nth-child(4) {
            transform: translate(2.8em, 2.8em);
          }

div[class=theme_switch] label .elements svg:nth-child(5) {
            transform: translate(1.8em, 3.2em);
          }

div[class=theme_switch] label .elements svg:nth-child(6) {
            transform: translate(0.7em, 2.8em);
          }

div[class=theme_switch] label .elements svg:nth-child(7) {
            transform: translate(0.35em, 1.8em);
          }

div[class=theme_switch] label .elements svg:nth-child(8) {
            transform: translate(0.7em, 0.7em);
          }

div[class=theme_switch] label input:checked+.planet {
        --bg-planet-bright: #D7D7D8;
      }

div[class=theme_switch] label input:checked+.planet::after {
          opacity: 1;
          transform: translate(0.6em, -0.5em);
        }

div[class=theme_switch] label input:checked~.elements {
        transform: rotate(180deg);
      }

div[class=theme_switch] label input:checked~.elements svg:first-child {
            transform: translate(2em, 1em);
            opacity: 0;
          }

div[class=theme_switch] label input:checked~.elements svg:nth-child(2) {
            transform: translate(3em, 1.5em);
            opacity: 0;
          }

div[class=theme_switch] label input:checked~.elements svg:nth-child(3) {
            transform: translate(3em, 2em);
            opacity: 0;
          }

div[class=theme_switch] label input:checked~.elements svg:nth-child(4) {
            transform: translate(3em, 2em);
            opacity: 0;
          }

div[class=theme_switch] label input:checked~.elements svg:nth-child(5) {
            transform: translate(1.9em, 2.6em);
            width: 0.3em;
            height: 0.3em;
          }

div[class=theme_switch] label input:checked~.elements svg:nth-child(5) circle {
              fill: var(--bg-planet-lightshadow);
            }

div[class=theme_switch] label input:checked~.elements svg:nth-child(6) {
            transform: translate(1.4em, 2.5em);
            width: 0.3em;
            height: 0.3em;
          }

div[class=theme_switch] label input:checked~.elements svg:nth-child(6) circle {
              fill: var(--bg-planet-lightshadow);
            }

div[class=theme_switch] label input:checked~.elements svg:nth-child(7) {
            transform: translate(1.1em, 1.6em);
            width: 0.7em;
            height: 0.7em;
          }

div[class=theme_switch] label input:checked~.elements svg:nth-child(7) circle {
              fill: var(--bg-planet-lightshadow);
            }

div[class=theme_switch] label input:checked~.elements svg:nth-child(8) {
            width: 0.45em;
            height: 0.45em;
            transform: translate(1.7em, 2.1em);
          }

div[class=theme_switch] label input:checked~.elements svg:nth-child(8) circle {
              fill: var(--bg-planet-lightshadow);
            }