<label class="particles-checkbox-container">
  <input type="radio" class="particles-checkbox" name="toggle">
  <span>Sliver</span>
</label>

<label class="particles-checkbox-container">
  <input type="radio" class="particles-checkbox" name="toggle">
  <span>Royla Blue</span>
</label>

<label class="particles-checkbox-container">
  <input type="radio" class="particles-checkbox" name="toggle">
  <span>Dark Gray</span>
</label>
<!-- ----------------------- -->
<a href="https://codepen.io/chandrashekhar" target="_blank" class="pens_link">
  <i class="fa-brands fa-codepen"></i>
</a>
<!-- ----------------------- -->

@import "compass";
html,
body {
  height: 100%;
}

@function createParticles(
  $color,
  $noOfParticles,
  $particlesDistance,
  $startAngle
) {
  $shadow: "0px 0px 0px transparent";
  $angle: 360deg / $noOfParticles;
  @for $i from 1 through $noOfParticles {
    $requiredAngle: ($startAngle + $angle) * $i;
    $x: $particlesDistance * cos($requiredAngle);
    $y: $particlesDistance * sin($requiredAngle);
    $shadow: "#{$shadow}, #{$x} #{$y} #{$color}";
  }
  @return unquote($shadow);
}

$bg: #232739;
$bgA: #577af3;
body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #232739;
  flex-direction: column;
}
:root {
  --cSize: 30px;
  --cInactive: #232739;
  --cActive: #577af3;
  --particleSize: 0px;
  --cEasing: ease;
  --cTiming: 0.5s;
  --innerPaddingSize: 30px;
}
.particles-checkbox {
  height: var(--cSize);
  width: var(--cSize);
  display: inline-flex;
  appearance: none;
  border: 3px lighten($bg, 30%) solid;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  transition: all var(--cTiming) var(--cEasing);
  margin: 2px;
  &:focus {
    outline: 0;
  }
  &:checked {
    background-color: var(--cActive);
    &::after {
      background-color: #ffffff;
      height: calc(var(--cSize) * 0.3);
      width: calc(var(--cSize) * 0.3);
    }
    &::before {
      animation: particleAnimate var(--cTiming) var(--cEasing) forwards;
    }
    + span {
      border-color: $bgA;
      color: lighten($bg, 60%);
    }
  }
  &::before,
  &::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: inherit;
    height: 0px;
    width: 0px;
  }
  &::after {
    transition: all var(--cTiming) var(--cEasing);
  }
  &::before {
    --particleSize: 4px;
    height: var(--particleSize);
    width: var(--particleSize);
    z-index: 2;
  }
}

@keyframes particleAnimate {
  0% {
    box-shadow: createParticles(transparent, 0, 0px, 0deg),
      createParticles(transparent, 0, 0px, 0deg),
      createParticles(transparent, 0, 0px, 0deg);
    transform: rotate(0turn);
    opacity: 1;
  }
  50%,
  100% {
    box-shadow: createParticles(#f94144, 7, 20px, 45deg),
      createParticles(#f9c74f, 3, 30px, 90deg),
      createParticles(#ffd166, 5, 32px, 135deg);
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(0.5turn);
  }
}

.particles-checkbox-container {
  display: inline-flex;
  margin: 20px;
  align-items: center;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  transition: all var(--cTiming) var(--cEasing);
  span {
    border: 3px solid transparent;
    border-radius: calc(var(--innerPaddingSize) * 0.5);
    padding: 10px;
    margin-left: 4px;
    padding: var(--innerPaddingSize);
    padding-left: calc(var(--cSize) + var(--innerPaddingSize) + 10px);
    width: 300px;
    color: lighten($bg, 30%);
    transition: all var(--cTiming) var(--cEasing);
  }
  .particles-checkbox {
    position: absolute;
    left: var(--innerPaddingSize);
  }
}
/********************************/
.pens_link {
  position: fixed;
  bottom: 56px;
  right: 56px;
  margin: auto;
  display: inline-flex;
  font-size: 2rem;
  text-decoration: none;
  border-radius: 500px;
  background-color: #ffffff;
  color: #212121;
  height: 56px;
  width: 56px;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  animation: animate 1500ms ease infinite;
  @keyframes animate {
    0%,
    100% {
      transform: translatey(-10%);
    }
    50% {
      transform: translatey(10%);
    }
  }
}

/*******************************/