@keyframes float {
  0% { top: 50%; }
  50% { top: 55%; }
  100% { top: 45%; }
}

@keyframes float2 {
  0% { transform: rotate(7deg); }
  100% { transform: rotate(-7deg); }
}

.space {
  font-size: 1em;
  appearance: none;
  width: 3em;
  height: 1em;
  position: relative;
  border: max(1px, 0.05em) solid #123;
  box-sizing: content-box;
  border-radius: 2em;
  background:
    /* stars */
    radial-gradient(circle at 20% 20%, #fff8 0.5%, #0000 0),
    radial-gradient(circle at 40% 34%, #fff8 0.75%, #0000 0) 20% 50% / 60% 60%,
    radial-gradient(circle at 40% 34%, #fff8 0.75%, #0000 0) 50% 20% / 60% 60%,
    radial-gradient(circle at 30% 38%, #fff8 0.5%, #0000 0),
    radial-gradient(circle at 40% 34%, #fff8 0.95%, #0000 0) 10% -10% / 50% 50%,
    /* base */
    linear-gradient(#0000, #0002),
    #123;
  overflow: hidden;
  
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: -1.8em;
    width: calc(100% - 0.7em);
    height: 100%;
    background: 
      radial-gradient(80% 100% at 50% 0, #0000 calc(100% - 0.05em - 1px), #bbb calc(100% - 0.5em) calc(100% - 1px), #0000) 0 20.5% / 51% 50% no-repeat,
      radial-gradient(80% 100% at 50% 100%, #0000 calc(100% - 0.05em - 1px), #bbb calc(100% - 0.5em) calc(100% - 1px), #0000) 100% 70% / 50% 50% no-repeat;
    transition: left 1s;
    transform-origin: 100% 50%;
    animation: float2 9s infinite alternate;
/*     filter: blur(0.01em) contrast(200); */
  }
  
  &::after {
    animation: float 7s infinite alternate;
    content: "";
    position: absolute;
    top: 50%;
    left: 0.6em;
    transform: translate(-50%, -50%) rotate(0deg);
    width: 0.8em;
    height: 0.8em;
    clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
    background:
      /* head */
      radial-gradient(circle at 54% 11%, #cffc 2%, #0000 calc(2% + 1px)),
      radial-gradient(circle at 59% 14%, #cffc 3%, #0000 calc(3% + 1px)),
      radial-gradient(50% 45% at 50% 50%, #123 99%, #0000 calc(99% + 1px)) 50% 6.6% / 31% 25%,
      radial-gradient(50% 50% at 50% 50%, #aaa 99%, #0000 calc(99% + 1px)) 50% 5% / 32% 25%,
      radial-gradient(farthest-side at 50% 0, #889 99%, #0000 calc(99% + 1px)) 50% 20% / 32% 16%,
      radial-gradient(closest-side circle at 50% 16%, #eee 99%, #eee0 calc(99% + 1px)),
      radial-gradient(40% 50% at 35% 17%, #eee 10%, #0000 calc(10% + 1px)),
      radial-gradient(40% 50% at 65% 17%, #eee 10%, #0000 calc(10% + 1px)),
      /* body */
      linear-gradient(#aaa 0 0) 40% 64.5% / 5% 8%,
      linear-gradient(#aaa 0 0) 60% 64.5% / 5% 8%,
      linear-gradient(#ccc 0 0) 50% 64% / 35.5% 6%,
      linear-gradient(orange 0 0) 46% 46% / 3% 7%,
      radial-gradient(circle at 54% 45%, red 1%, #0000 calc(1% + 1px)),
      radial-gradient(circle at 54% 48%, green 1%, #0000 calc(1% + 1px)),
      linear-gradient(#ccc 0 0) 50% 46% / 14% 10%,
      radial-gradient(85% 25% at 50% 67%, #eee 20.25%, #0000 calc(20.25% + 1px)),
      radial-gradient(farthest-side at 50% 100%, #eee 99%, #0000 calc(99% + 1px)) 50% 45% / 35% 40%,  
      /* arms */
      radial-gradient(closest-side circle at 18% 8%, #ccc 99%, #0000 calc(99% + 1px)),
      radial-gradient(farthest-side at 80% 20%, #0000 65%, #eee 0 99%, #0000 calc(99% + 1px)) 18% 18% / 30% 27%,
      radial-gradient(circle at 82% 64%, #ccc 7%, #0000 calc(7% + 1px)),
      radial-gradient(farthest-side at 30% 80%, #0000 67%, #eee 0 99%, #0000 calc(99% + 1px)) 82% 43% / 36% 29%,
      /* legs */
      linear-gradient(12deg, #0000 50%, #0002 0 55%, #0000 calc(55% + 1px)) 32% 90% / 11% 10%,
      linear-gradient(-14deg, #0000 50%, #0002 0 55%, #0000 calc(55% + 1px)) 71.5% 89% / 13% 10%,
      linear-gradient(12deg, #ccc 55%, #0000 calc(55% + 1px)) 23.5% 100% / 22.5% 10%,
      linear-gradient(-12deg, #ccc 50%, #0000 calc(50% + 1px)) 83.75% 98% / 21% 10%,
      radial-gradient(farthest-side at 100% 80%, #0000 55%, #eee 0 99%, #0000) 37.5% 100% / 25% 50%,
      linear-gradient(65deg, #0000 30%, #eee 0 55%, #0000 calc(55% + 1px)) 85% 97% / 40% 35%,
      radial-gradient(140% 120% at 80% 93%, #eee 5%, #0000 calc(5% + 1px)),
      radial-gradient(140% 120% at 25% 95%, #eee 5%, #0000 calc(5% + 1px)),
      /* backpack */
      radial-gradient( 66% 66%, #89a 99%, #0000 calc(99% + 1px)) 50% 48% / 39% 40%,
      #f000;
    background-repeat: no-repeat;
    transition: left 1s, transform 6s;
  }
  
  &:checked {
    &::before {
      left: 0;
    }
    &::after {
      left: calc(100% - 0.6em);
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }
  
  &[disabled] {
    &, &::before, &::after {
      filter: grayscale(1);
      animation: none;
      transition-duration: 0s;
    }
  }
}

@media (prefers-reduced-motion) {
  .space {
    &, &::before, &::after {
      animation: none;
      transition-duration: 0s;
    }
  }
}