.radio {
  min-height: 2rem;
}

.radio__input {
  opacity: 0;
  appearance: none;
  position: absolute;

  &:focus {
    + .radio__label {

      &::before {
        background-color: #f2f2f2;
      }
    }
  }

  &:checked + .radio__label {
    color: $dark;

    &::before {
      border-color: $primary;
    }

    &::after {
      opacity: 1;
    }
  }
}

.radio__label {
  display: block;
  position: relative;
  padding: 0 0 .5rem 3rem;

  font-size: 1.4rem;
  line-height: 1.4;
  color: #606060;
  cursor: pointer;
  text-align: left;
  font-weight: 500;

  &::before {
    content: "";
    display: block;
    width: 1.8rem;
    height: 1.8rem;

    border: 1px solid #606060;
    background-color: $white;
    border-radius: 50%;

    transition: border .2s linear;

    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }

  &::after {
    content: "";
    display: block;
    width: 1.2rem;
    height: 1.2rem;

    background: $primary;
    border-radius: 50%;
    opacity: 0;

    position: absolute;
    top: 3px;
    left: 3px;
    z-index: 2;

    transition: opacity .2s linear;
  }

  &:hover {
    &:before {
      border-color: #001E60;
    }
  }
}