*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue';
}

a {
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

body {
  height: 100vh;
  width: 100%;
  background-image: radial-gradient(125% 125% at 50% 10%, #fff 40%, #6366f1 100%);
}

html {
  background: #e2d5b4;
}

@keyframes lever1 {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.04);
  }
}

@keyframes lever2 {
  0%,
  100% {
    transform: translate(-50%, -50%) scaleY(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.04);
  }
}

.lever {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  appearance: none;
  font-size: 0.6em;
  width: 15em;
  height: 5em;
  border-radius: 20em;
  background: radial-gradient(farthest-side, #0000, #000), #111;
  box-shadow: inset 0 -0.3em 0.4em -0.2em #fff2, inset 0 0.25em 0.5em #0001,
    inset 0 0.5em 0.5em #0001, inset 0 0 0 1.25em #beb190;

  &::before {
    content: '';
    width: 40%;
    height: 40%;
    top: 50%;
    left: 15%;
    background: repeating-radial-gradient(
        100% 200% at 0 50%,
        #0000 0 2%,
        #1232 0 3%
      ),
      radial-gradient(110% 500% at 100% 50%, #000c, #0000 15%),
      linear-gradient(90deg, #0000 50%, #000d),
      radial-gradient(100% 200% at 0 50%, #000 20%, #0000 60%),
      linear-gradient(#0004, #0000, #fffc, #0000, #0000, #0003 90%), silver;
    position: absolute;
    transform: translate(0, -50%) rotateY(0);
    border-radius: 50em;
    transform-origin: 90% 50%;
    transition: all 0.5s;
    transition-timing-function: cubic-bezier(0.75, 1.35, 0.75, 0.75);
    clip-path: polygon(0 0, 100% 4%, 100% 96%, 0 100%);
  }

  &::after {
    content: '';
    animation: lever1 0.5s 1 forwards;
    width: 10em;
    aspect-ratio: 1;
    background: radial-gradient(circle at 30% 30%, #fff4, #fff0 30%) 0 0 / 80% 80%
        no-repeat,
      #c84036;
    background-position: 40% 20%;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    transition: all 0.5s, transform 0.5s linear;
    transition-timing-function: cubic-bezier(0.75, 1.35, 0.75, 0.75);
    box-shadow: inset 0 0 2em #0002, inset -1em -1em 2em #0004,
      inset -3em -3em 2em -4em #0007, 0 0 0 #0000, 2em 2em 2em #0005;
  }

  &:checked {
    &::before {
      transform: translate(0, -50%) rotateY(180deg);
    }

    &::after {
      animation: lever2 0.5s 1 forwards;
      left: 100%;
      background-position: 0% 20%;
      box-shadow: inset 0 0 2em #0002, inset -2em -2em 2em #0004,
        inset -3em -3em 2em -3.75em #0009, -2.5em 1em 2em -3em #000,
        2.5em 2.5em 2.25em #0004;
    }
  }
}

@media print {
  .lever {
    &,
    &::before,
    &::after {
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
    }
  }
}

@media (prefers-reduced-motion) {
  .lever {
    &,
    &::before,
    &::after {
      transition: none !important;
      animation: none !important;
    }
  }
}