/* made by ihaverizzra */
/* github.com/ihaverizzra */

.adv-checkbox-label {
  --size: 2em;
  --border-width: 0.15em;
  --tick-scale: 0.8;
  --box-bg: #333;
  --box-border: #555;
  --box-border-hover: #888;
  --tick-bg: #00aaff;
  --tick-glow: #00ffff;
  --glitch-1-color: #ff00ff;
  --glitch-2-color: #00ff00;
  --shine-color: rgba(255, 255, 255, 0.5);
  --focus-color: #6ebff5;
  --shadow-color: rgba(0, 0, 0, 0.4);
  --transition-speed: 0.3s;
  --glitch-speed: 0.4s;
  --shine-speed: 1.2s;
  --jelly-speed: 0.5s;

  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  gap: 0.5em;
  font-size: 16px;
  color: #eee;
  font-family: sans-serif; /* Added for clarity */
}

.adv-checkbox-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.adv-checkbox-box {
  width: var(--size);
  height: var(--size);
  border: var(--border-width) solid var(--box-border);
  background-color: var(--box-bg);
  border-radius: 0.25em;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition:
    border-color var(--transition-speed) ease,
    background-color var(--transition-speed) ease,
    box-shadow var(--transition-speed) ease;
  box-shadow:
    0 0.1em 0.1em var(--shadow-color),
    0 0.2em 0.3em var(--shadow-color),
    inset 0 0.1em 0.2em rgba(0, 0, 0, 0.3);
  overflow: hidden; /* Important for containing inner elements */
}

.adv-checkbox-tick-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0); /* Start hidden */
  opacity: 0;
  transition:
    transform var(--transition-speed) cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity var(--transition-speed) ease;
}

.adv-checkbox-tick {
  width: calc(var(--size) * var(--tick-scale));
  height: calc(var(--size) * var(--tick-scale));
  background-color: var(--tick-bg);
  border-radius: 0.15em;
  position: relative;
  box-shadow:
    0 0 0.5em var(--tick-glow),
    0 0 1em var(--tick-glow),
    0 0.1em 0.2em var(--shadow-color);
  overflow: hidden;
}

.adv-checkbox-shine {
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 30%;
  background: var(--shine-color);
  transform: rotate(20deg) translateX(-150%);
  filter: blur(0.1em);
  opacity: 0;
  transition:
    transform var(--shine-speed) ease-out,
    opacity var(--shine-speed) ease-out;
}

.adv-checkbox-glitch {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0.15em;
  opacity: 0;
  mix-blend-mode: hard-light; /* Changed blend mode */
  animation-duration: var(--glitch-speed);
  animation-timing-function: steps(3, end);
  animation-iteration-count: infinite;
  transition: opacity var(--transition-speed) ease;
}

.adv-checkbox-glitch--1 {
  background-color: var(--glitch-1-color);
  animation-name: glitch-effect-1;
}

.adv-checkbox-glitch--2 {
  background-color: var(--glitch-2-color);
  animation-name: glitch-effect-2;
}

/* Checked State */
.adv-checkbox-input:checked + .adv-checkbox-box .adv-checkbox-tick-container {
  transform: scale(1);
  opacity: 1;
}

.adv-checkbox-input:checked + .adv-checkbox-box .adv-checkbox-glitch {
  opacity: 0.5;
}

.adv-checkbox-input:checked + .adv-checkbox-box .adv-checkbox-shine {
  opacity: 1;
  transform: rotate(20deg) translateX(150%);
}

/* Hover State */
.adv-checkbox-label:hover .adv-checkbox-box {
  border-color: var(--box-border-hover);
}

/* Focus State */
.adv-checkbox-input:focus-visible + .adv-checkbox-box {
  outline: none; /* Remove default */
  box-shadow:
    0 0.1em 0.1em var(--shadow-color),
    0 0.2em 0.3em var(--shadow-color),
    inset 0 0.1em 0.2em rgba(0, 0, 0, 0.3),
    0 0 0 0.15em var(--box-bg),
    /* Inner space */ 0 0 0 0.3em var(--focus-color); /* Outer glow */
}

/* Active State (Jelly) */
.adv-checkbox-input:active + .adv-checkbox-box .adv-checkbox-tick-container {
  animation: jelly-pop var(--jelly-speed) ease;
}

@keyframes glitch-effect-1 {
  0%,
  100% {
    transform: translate(0.03em, -0.03em);
    clip-path: polygon(0 0, 100% 0, 100% 30%, 0 30%);
  }
  33% {
    transform: translate(-0.02em, 0.04em);
    clip-path: polygon(0 33%, 100% 33%, 100% 66%, 0 66%);
  }
  66% {
    transform: translate(0.01em, -0.02em);
    clip-path: polygon(0 70%, 100% 70%, 100% 100%, 0 100%);
  }
}

@keyframes glitch-effect-2 {
  0%,
  100% {
    transform: translate(-0.03em, 0.02em);
    clip-path: polygon(0 5%, 100% 5%, 100% 40%, 0 40%);
  }
  33% {
    transform: translate(0.03em, -0.03em);
    clip-path: polygon(0 45%, 100% 45%, 100% 75%, 0 75%);
  }
  66% {
    transform: translate(-0.01em, 0.01em);
    clip-path: polygon(0 80%, 100% 80%, 100% 95%, 0 95%);
  }
}

@keyframes jelly-pop {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.2, 0.8);
  }
  50% {
    transform: scale(0.9, 1.1);
  }
  70% {
    transform: scale(1.05, 0.95);
  }
  100% {
    transform: scale(1);
  }
}

.adv-checkbox-text {
  /* Optional: Style the text next to the checkbox */
  line-height: var(--size); /* Align text vertically with the box */
}