.drac-checkbox,
.drac-radio {
  --active-inner: var(--white);
  --background: var(--white);
  --disabled: var(--blackSecondary);
  --disabled-inner: var(--blackTernary);
  appearance: none;
  height: 21px;
  outline: none;
  display: inline-block;
  vertical-align: top;
  position: relative;
  margin: 0;
  cursor: pointer;
  border: 1px solid var(--local-bg-color, var(--border));
  background: var(--local-bg, var(--background));
  transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
}

.drac-checkbox:after,
.drac-radio:after {
  content: '';
  display: block;
  left: 0;
  top: 0;
  position: absolute;
  transition: transform var(--local-transform-speed, 0.3s)
      var(--local-transform-effect, ease),
    opacity var(--local-opacity-speed, 0.2s);
}

.drac-checkbox:checked,
.drac-radio:checked {
  --local-bg: var(--active);
  --local-bg-color: var(--active);
  --local-opacity-speed: 0.3s;
  --local-transform-speed: 0.6s;
  --local-transform-effect: cubic-bezier(0.2, 0.85, 0.32, 1.2);
}

.drac-checkbox:disabled,
.drac-radio:disabled {
  --local-bg: var(--disabled);
  cursor: not-allowed;
  opacity: 0.9;
}

.drac-checkbox:disabled:checked,
.drac-radio:disabled:checked {
  --local-bg: var(--disabled-inner);
  --local-bg-color: var(--border);
}

.drac-checkbox:disabled + label,
.drac-radio:disabled + label {
  cursor: not-allowed;
}

.drac-checkbox:hover:not(:checked):not(:disabled),
.drac-radio:hover:not(:checked):not(:disabled) {
  --local-bg-color: var(--border-hover);
}

.drac-checkbox:focus,
.drac-radio:focus {
  box-shadow: 0 0 0 var(--focus);
}

.drac-checkbox:not(.drac-switch),
.drac-radio:not(.drac-switch) {
  width: 21px;
}

.drac-checkbox:not(.drac-switch):after,
.drac-radio:not(.drac-switch):after {
  opacity: var(--local-opacity, 0);
}

.drac-checkbox:not(.drac-switch):checked,
.drac-radio:not(.drac-switch):checked {
  --local-opacity: 1;
}

.drac-checkbox + label,
.drac-radio + label {
  font-size: 14px;
  line-height: 21px;
  display: inline-block;
  vertical-align: top;
  cursor: pointer;
  margin-left: 4px;
}

.drac-checkbox:not(.drac-switch) {
  border-radius: 7px;
}

.drac-checkbox:not(.drac-switch):after {
  width: 5px;
  height: 9px;
  border: 2px solid var(--black);
  border-top: 0;
  border-left: 0;
  left: 6px;
  top: 2px;
  transform: rotate(var(--local-rotation, 20deg));
}

.drac-checkbox:not(.drac-switch):checked {
  --local-rotation: 43deg;
}

.drac-checkbox.drac-switch {
  width: 38px;
  border-radius: 11px;
}

.drac-checkbox.drac-switch:after {
  left: 2px;
  top: 2px;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  background: var(--ab, var(--border));
  transform: translateX(var(--x, 0));
}

.drac-checkbox.drac-switch:checked {
  --ab: var(--active-inner);
  --x: 17px;
}

.drac-checkbox.drac-switch:disabled:not(:checked):after {
  opacity: 0.6;
}

.drac-radio {
  border-radius: 50%;
}

.drac-radio:after {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--active-inner);
  opacity: 0;
  transform: scale(var(--s, 0.7));
}

.drac-radio:checked {
  --s: 0.5;
}

.drac-radio-black,
.drac-switch-black,
.drac-checkbox-black {
  --active: var(--black);
  --focus: var(--blackSecondary);
  --border: var(--blackSecondary);
  --border-hover: var(--black);
}

.drac-radio-white,
.drac-switch-white,
.drac-checkbox-white {
  --active: var(--white);
  --focus: var(--whiteSecondary);
  --border: var(--whiteSecondary);
  --border-hover: var(--white);
}

.drac-radio-cyan,
.drac-switch-cyan,
.drac-checkbox-cyan {
  --active: var(--cyan);
  --focus: var(--cyanSecondary);
  --border: var(--cyanSecondary);
  --border-hover: var(--cyan);
}

.drac-radio-green,
.drac-switch-green,
.drac-checkbox-green {
  --active: var(--green);
  --focus: var(--greenSecondary);
  --border: var(--greenSecondary);
  --border-hover: var(--green);
}

.drac-radio-orange,
.drac-switch-orange,
.drac-checkbox-orange {
  --active: var(--orange);
  --focus: var(--orangeSecondary);
  --border: var(--orangeSecondary);
  --border-hover: var(--orange);
}

.drac-radio-pink,
.drac-switch-pink,
.drac-checkbox-pink {
  --active: var(--pink);
  --focus: var(--pinkSecondary);
  --border: var(--pinkSecondary);
  --border-hover: var(--pink);
}

.drac-radio-purple,
.drac-switch-purple,
.drac-checkbox-purple {
  --active: var(--purple);
  --focus: var(--purpleSecondary);
  --border: var(--purpleSecondary);
  --border-hover: var(--purple);
}

.drac-radio-red,
.drac-switch-red,
.drac-checkbox-red {
  --active: var(--red);
  --focus: var(--redSecondary);
  --border: var(--redSecondary);
  --border-hover: var(--red);
}

.drac-radio-yellow,
.drac-switch-yellow,
.drac-checkbox-yellow {
  --active: var(--yellow);
  --focus: var(--yellowSecondary);
  --border: var(--yellowSecondary);
  --border-hover: var(--yellow);
}