@import 'main';

$radio_icon_outer_size: 18px;
$radio_icon_unchecked_inner_size: 14px;
$radio_icon_unchecked_inner_margin: ($radio_icon_outer_size - $radio_icon_unchecked_inner_size) / 2;
$radio_icon_checked_inner_size: 8px;
$radio_icon_checked_inner_margin: ($radio_icon_outer_size - $radio_icon_checked_inner_size) / 2;

.radio-item {
  cursor: pointer;

  input[type=radio] {
    display: none;

    & + .icon {
      background-color: $color_grey;
    }

    &:checked {
      &:not(:disabled) + .icon {
        background-color: $color_primary;
      }

      & + .icon:after {
        width: $radio_icon_checked_inner_size;
        height: $radio_icon_checked_inner_size;
        top: $radio_icon_checked_inner_margin;
        left: $radio_icon_checked_inner_margin;
      }

      &:disabled + .icon:after {
        background-color: $color_light;
      }
    }

    &:not([disabled]) {
      & + .icon:after {
        background-color: $color_paper;
      }

      &:not(:checked) + .icon:after {
        width: $radio_icon_unchecked_inner_size;
        height: $radio_icon_unchecked_inner_size;
        top: $radio_icon_unchecked_inner_margin;
        left: $radio_icon_unchecked_inner_margin;
      }
    }
  }
}

.icon {
  cursor: pointer;
  width: $radio_icon_outer_size;
  height: $radio_icon_outer_size;
  @include border-radius(50%);

  &:after {
    content: '';
    position: absolute;
    @include border-radius(50%);
    @include transition(400ms, cubic-bezier(0.175, 0.885, 0.32, 1.275), all);
  }
}