@layer kform {

:root { 
  --def-background:white;
  --def-background-checked:#409759;
  --def-border:#dcdcdc;
  --def-border-hover:#98c8a8;
  --def-border-focus:rgba(0,0,0,.1);
  --def-tick:white;

  --rad-def-background:white;
  --rad-def-checked-background:#409759;
  --rad-def-border:#dcdcdc;
  --rad-def-border-hover:#98c8a8;
  --rad-def-tick:white;
/*  
  --chk-background:white;
  --chk-background-checked:#409759;
  --chk-border:#dcdcdc;
  --chk-border-hover:#98c8a8;
  --chk-border-focus:rgba(0,0,0,.1);
  --chk-tick:white;

  --rad-background:white;
  --rad-checked-background:#409759;
  --rad-border:#dcdcdc;
  --rad-border-hover:#98c8a8;
*/
}

.ui.form.dark,
.ui.modal.dark {
  --def-background:#222222;
  --def-background-checked:#4573e2;
  --def-border:#505154;
  --def-border-hover:#36518e;
  --def-border-focus:rgba(255,255,255,.1);
  --def-tick:white;
  --def-label:rgb(255,255,255,.9);

  --rad-def-background:#222222;
  --rad-def-checked-background:#4573e2;
  --rad-def-border:#505154;
  --rad-def-border-hover:#36518e;
  --rad-def-label:rgb(255,255,255,.9);
  --rad-def-tick:white;

/*
  --chk-background:#222222;
  --chk-border:#505154;
  --chk-border-hover:#36518e;
  --chk-border-focus:rgba(255,255,255,.1);
  --chk-background-checked:#4573e2;
  --chk-tick:white;
  --chk-label:rgb(255,255,255,.9);

  --rad-background:#222222;
  --rad-checked-background:#4573e2;
  --rad-border:#505154;
  --rad-border-hover:#36518e;
  --rad-label:rgb(255,255,255,.9);
  --rad-tick:white;
*/
}

label.checkbox {
  /*margin-top: 25px;*/
  cursor: pointer;
  position: relative;
}

.dark .nomar label.checkbox { margin-top: 0px; }
.dark .minmar label.checkbox { margin-top: 10px; }

label.checkbox {
  --c-background: var(--chk-background, var(--def-background));
  --c-border-focused: var(--chk-border-focus, var(--def-border-focus));
  --c-border: var(--chk-border,var(--def-border));
  --c-border-hover: var(--chk-border-hover,var(--def-border-hover));
  --c-background-active: var(--chk-background-checked, var(--def-background-checked));
  --c-tick: var(--chk-tick, var(--def-tick));
}

label.checkbox .chklabel {
  position: relative;
  padding-left: 30px;
  font-size: 14px;
  text-transform: none;
  min-height: 21px;
  line-height: 21px;
  user-select: none;
  display: inline-block;
  /*white-space: nowrap;*/
}
.dark label.checkbox .chklabel { color: var(--chk-label, var(--def-label)); }

label.checkbox input,
label.checkbox svg {
  width: 21px !important;
  height: 21px !important;
  display: block !important;
}
label.checkbox input {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  position: absolute !important;
  left: 0;
  /*top:1px;*/
  outline: none !important;
  background: var(--c-background) !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  border-radius: 4px !important;
  transition: box-shadow 0.3s !important;
  box-shadow: inset 0 0 0 var(--s, 2px) var(--b, var(--c-border)) !important;
}
label.checkbox input:focus, 
label.checkbox input:hover {
  --s: 2px;
  --b: var(--c-border-hover) !important;
}
label.checkbox input:checked {
  --b: var(--c-background-active) !important;
}
label.checkbox input:focus:checked + svg {
  box-shadow: 0 0 0 3px var(--c-border-focused) !important;
  border-radius: 5px;
}

label.checkbox svg {
  pointer-events: none;
  fill: none;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: var(--stroke, var(--c-background-active));
  position: absolute;
  top: 0;
  left: 0;
  width: 21px;
  height: 21px;
  transform: scale(var(--scale, 1)) translateZ(0);
}
label.checkbox.path input:checked {
  --s: 2px;
  transition-delay: 0.4s;
}
.checkbox.path input:checked + svg {
  --a: 16.1 86.12;
  --o: 102.22;
}
.checkbox.path svg {
  stroke-dasharray: var(--a, 86.12);
  stroke-dashoffset: var(--o, 86.12);
  transition: stroke-dasharray 0.6s, stroke-dashoffset 0.6s;
}
.checkbox.bounce {
  --stroke: var(--c-tick);
}
.checkbox.bounce input:checked {
  --s: 11px;
}
.checkbox.bounce input:checked + svg {
  -webkit-animation: bounce 0.4s linear forwards 0.2s;
          animation: bounce 0.4s linear forwards 0.2s;
}
.checkbox.bounce svg {
  --scale: 0;
}

@-webkit-keyframes bounce {
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes bounce {
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

/*****************/
/*     Radio     */
/*****************/

.radio {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  outline: none;
  width: max-content;

  /* ===== Variables ===== */
  --label-color: white;
  --radio-accent: rgba(80,180,255,0.9);
  --radio-accent-soft: rgba(0,150,255,0.25);
  --radio-accent-glow: rgba(80,180,255,0.35);
  --radio-ring-border: rgba(255,255,255,0.2);
  --radio-ring-hover: rgba(255,255,255,0.35);
  --radio-bg: rgba(255,255,255,0.05);
  --radio-bg-active: rgba(255,255,255,0.08);
  --radio-inner-light: rgba(255,255,255,0.2);
  --radio-inner-rim: rgba(255,255,255,0.15);
  --radio-dot-gradient-start: #4fc3f7;
  --radio-dot-gradient-end: #0288d1;
  --radio-dot-glow: rgba(0,150,255,0.4);
  --radio-focus-ring: rgba(0,150,255,0.15);

  /* ===== Base ===== */
  & input { display: none; }

  /* ===== Checked ring ===== */
  & input:checked + label::before {
    border-color: var(--radio-accent);
    background: var(--radio-bg-active);
    box-shadow:
      inset 0 0 0 1px var(--radio-inner-rim),
      inset 0 1px 2px var(--radio-inner-light),
      0 0 6px var(--radio-accent-glow),
      0 0 14px var(--radio-accent-soft);
  }

  /* ===== Focus ===== */
  & input:focus + label::before {
    outline: none;
    box-shadow:
      0 0 0 3px var(--radio-focus-ring),
      inset 0 1px 2px rgba(255,255,255,0.15);
  }

  /* ===== Dot active ===== */
  & input:checked + label::after {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }

  /* ===== Label ===== */
  & label {
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    color: var(--label-color);
    user-select: none;
  }

  /* ===== Hover ===== */
  & label:hover::before { border-color: var(--radio-ring-hover); }

  /* ===== Outer ring ===== */
  & label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid var(--radio-ring-border);
    background: var(--radio-bg);
    backdrop-filter: blur(4px);
    box-shadow:
      inset 0 1px 2px rgba(255,255,255,0.1),
      0 0 0 0 rgba(0,150,255,0);
    transition: all 0.35s ease;
  }

  /* ===== Dot ===== */
  & label::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%) scale(0.4);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(
      180deg,
      var(--radio-dot-gradient-start),
      var(--radio-dot-gradient-end)
    );
    opacity: 0;
    box-shadow: 0 0 6px var(--radio-dot-glow);
    transition:
      transform 0.4s cubic-bezier(.2,.9,.3,1),
      opacity 0.3s ease;
  }

  /* ===== Press ===== */
  & label:active::after {
    transform: translateY(-50%) scale(0.9);
  }
}

form.kui label.radio { margin:0; }


}