.deco
  .deco-1
  .deco-2
.wrapper
  .text Email notifications
  input#checkbox(type="checkbox", checked)
  label.button(for="checkbox")
    .dot
  
  

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&display=swap');

@mixin flexCenter {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin fullCover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

* {
  box-sizing: border-box;
}
html {
  font-size: 100vmax / 1600 * 100;
  @media (max-width: 992px) {
    font-size: 60px;
  }
}
body {
  min-height: 100vh;
  @include flexCenter;
  color: #333;
  background-color: #eee;
  font-size: 0.3rem;
  font-family: 'Space Grotesk', sans-serif;
  position: relative;
  overflow: hidden;
}

.deco {
  @include fullCover;
  pointer-events: none;
  .deco-1 {
    position: absolute;
    top: 55%;
    left: 65%;
    width: 5rem;
    height: 5rem;
    transform: translate(-50%, -50%);
    background-image: radial-gradient(circle at 0 0, #f4c5cd, #ffeecf);
    border-radius: 5rem;
    animation: deco-move 8s infinite alternate;
    filter: blur(10px);
  }
  .deco-2 {
    position: absolute;
    top: 45%;
    left: 40%;
    width: 6rem;
    height: 6rem;
    transform: translate(-50%, -50%);
    background-image: radial-gradient(circle at 0 0, #a1cae9, #f7c6c6);
    border-radius: 5rem;
    animation: deco-move 6s infinite alternate;
    filter: blur(10px);
  }
  &:after {
    content: '';
    @include fullCover;
    backdrop-filter: blur(50px);
  }
}

$shadow-dark: rgba(#000, 0.3);
$shadow-light: rgba(#fff, 0.8);
$shadow-outer: 3px 3px 6px #{$shadow-dark}, -3px -3px 6px #{$shadow-light};
$shadow-inner: inset 2px 2px 5px #{$shadow-dark},
  inset -2px -2px 5px #{$shadow-light};

.wrapper {
  width: 6.5rem;
  border-radius: 12px;
  padding: 0.3rem 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  box-shadow: $shadow-outer;
  background-color: rgba(#fff, 0.3);
  z-index: 1;
}
.text {

}

$btn-height: 0.6rem;
$btn-gap: 0.1rem;
$dot-size: $btn-height - $btn-gap * 2;

input#checkbox {
  display: none;
  &:checked {
    + .button {
      filter: none;
      .dot {
        left: calc(100% - #{$dot-size} - #{$btn-gap});
        background-color: #4a6dc6;
      }
    }
  }
}
.button {
  position: relative;
  width: 1.2rem;
  height: $btn-height;
  border-radius: 1rem;
  box-shadow: $shadow-inner;
  cursor: pointer;
  .dot {
    position: absolute;
    width: $dot-size;
    height: $dot-size;
    left: $btn-gap;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    box-shadow: $shadow-outer;
    transition: all 0.3s;
    background-color: #aab7d9;
    will-change: left, background-color;
  }
}

@keyframes deco-move {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}