.nu-radio {
  position: relative;
  transition: all 0.2s ease-in-out;
}

.nu-radio.nu-radio--light {
  --bg-color: var(--light-bg);
  --selector-bg: var(--text-color);
  --text-color: var(--g-text-color-light);
  --disabled-bg: var(--g-text-color-disabled-light);
  --box-shadow: 2px 2px 4px var(--light-bg-dark-shadow),
    -2px -2px 4px var(--light-bg-light-shadow);
  --box-shadow-inset: inset -1px -1px 2px var(--light-bg-light-shadow),
    inset 1px 1px 2px var(--light-bg-dark-shadow);
}

.nu-radio.nu-radio--dark {
  --bg-color: var(--dark-bg);
  --selector-bg: var(--text-color);
  --text-color: var(--g-text-color-dark);
  --disabled-bg: var(--g-text-color-disabled-dark);
  --box-shadow: 2px 2px 4px var(--dark-bg-dark-shadow),
    -2px -2px 4px var(--dark-bg-light-shadow);
  --box-shadow-inset: inset -1px -1px 2px var(--dark-bg-light-shadow),
    inset 1px 1px 2px var(--dark-bg-dark-shadow);
}

.nu-radio:before {
  content: '';
  z-index: 0;
  top: -3px;
  left: -3px;
  width: 20px;
  height: 20px;
  display: block;
  cursor: pointer;
  position: absolute;
  border-radius: 10px;
  transition: all 0.2s ease-in-out;
}

.nu-radio:after {
  content: '';
  z-index: 2;
  top: 3px;
  left: 3px;
  width: 8px;
  height: 8px;
  display: block;
  cursor: pointer;
  position: absolute;
  border-radius: 6px;
  box-sizing: border-box;
  transition: all 0.2s ease-in-out;
}

.nu-radio:before {
  background-color: var(--bg-color);
  box-shadow: var(--box-shadow-inset);
}

.nu-radio:after {
  background-color: var(--text-color);
}

.nu-radio:checked:before {
  box-shadow: var(--box-shadow);
}

.nu-radio:checked:after {
  background-color: var(--selector-bg);
  box-shadow: none;
}

.nu-radio.nu-radio--disabled:after,
.nu-radio:checked.nu-radio--disabled:after {
  background-color: var(--disabled-bg);
  box-shadow: none;
}

.nu-radio:hover:after,
.nu-radio:focus:after {
  background-color: var(--selector-bg);
}

.nu-radio.nu-radio--disabled,
.nu-radio-label.nu-radio-label--disabled {
  pointer-events: none;
}

.nu-radio-label {
  padding-left: 12px;
}
