/* 
    Based on:
    https://codepen.io/mortezasharifinia/pen/popXJGN?editors=1100    
*/

:root {
  --orbs-size: 70px;
  --origin-offset: 50%;
}

.container-orbs {
  display: flex;
  align-items: center;
  justify-content: end;

  width: var(--orbs-size);
  height: var(--orbs-size);
  aspect-ratio: 1;

  position: relative;
}

.container-orbs input {
  /* -webkit-appearance: none; */
  /* -moz-appearance: none; */
  appearance: none;
  display: none;
}

.container-orbs label {
  height: var(--orbs-size);
  width: var(--orbs-size);
  position: absolute;
  pointer-events: all;
}

.orb {
  --orb-transition: 0.5s transform, 0.5s translate, 0.5s scale;
  --orb-light-transition:
    0.5s all, 0.8s transform-origin, 0.6s 0.2s background-color,
    0.6s 0.2s box-shadow, 0.4s 0s border-radius;
  --orb-light-hover-transition:
    0.5s all, 0.8s transform-origin, 0.6s 0.2s background-color,
    0.6s 0.2s box-shadow, 0.4s 0s border-radius;
  --orb-light-checked-transition:
    0.5s all, 0.8s 1s transform-origin, 0.6s 0.2s background-color,
    0.6s 0.2s box-shadow, 0.4s 0s border-radius;
  --orb-light-hover-checked-transition:
    0.5s all, 0.2s transform-origin, 0.6s 0.2s background-color,
    0.6s 0.2s box-shadow, 0.4s 0s border-radius;

  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 100%;
  width: 100%;
  transition: var(--orb-transition);
  visibility: hidden;

  border-radius: 50%;

  /* 1em scales with --orbs-size (baseline 70px). */
  font-size: var(--orbs-size, 70px);
}

.orb:hover {
  transform: scale(1.2);
  cursor: pointer;
}

.orb:hover .orb-light {
  transition: var(--orb-light-hover-transition);
  transform-origin: center;
  animation-play-state: paused;
  /* 4px / 70px baseline (--orbs-size) => 0.0571em */
  filter: blur(0.0428em);
}

/* .container-orbs:has(input:checked) { */
/*   & .orb { */
/*     transform: scale(1.2); */
/**/
/*     & .orb-light { */
/*       transition: var(--orb-light-checked-transition); */
/*       transform-origin: center; */
/*       animation-play-state: paused; */
/*     } */
/*   } */
/* } */

.orb .orb-lights {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.orb .orb-light {
  position: absolute;
  width: calc(100% + var(--relative-size));
  aspect-ratio: 1;
  border-radius: 100%;
  transform-origin: calc(var(--origin-offset) + var(--offset));
  background-color: var(--color);
  animation: 5s 0.8s linear infinite rotaion360;
  animation-duration: calc(var(--duration));
  mix-blend-mode: plus-lighter;
  filter: blur(0.1em);
  transition: var(--orb-light-transition);
}

.orb .orb-light:nth-child(even) {
  animation-direction: reverse;
}