$input-height: rem-calc(28px);
$gap: ru(.5);
$radio-size: ru(1);
$colored-dot-size: rem-calc(14px);

.radio-field {
  @include typography-b-8;

  margin: 0;
  display: block;
  position: relative;
  min-height: $radio-size;
  padding-left: $radio-size + $gap;
  user-select: none;

  &:before {
    position: absolute;
    top: ($input-height - $radio-size) / 2;
    left: 0;
    width: $radio-size;
    height: $radio-size;
    overflow: hidden;
    border: 1px solid color('neutral-3');
    border-radius: 50%;
    content: '';
  }
}

.label {
  display: inline-block;
  color: color('neutral-2');
  cursor: pointer;
  font-weight: 600;

  &:after {
    content: '';
    opacity: 0;
    position: absolute;
    top: ($input-height - $radio-size) / 2 + ($radio-size - $colored-dot-size) / 2;
    left: ($radio-size - $colored-dot-size) / 2;
    width: $colored-dot-size;
    height: $colored-dot-size;
    border-radius: 50%;
    background-color: color('primary-1');
  }

  &.checked {
    color: color('neutral-1');

    &:after { opacity: 1; }
  }

  &.not-selected {
    color: color('neutral-2');
  }
}

.radio {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: $input-height;
  opacity: 0;
  margin: 0;
  cursor: pointer;
  z-index: 10;
  pointer-events: all;
}

.radio:disabled {
  + .label {
    cursor: not-allowed;
    color: color('neutral-3');
  }
}