.tf-field-radio {

  .tf-fieldset {

    ul {
      li{
        margin-bottom: 10px;
      }

      &.tf-inline {
        li {
          display: inline-block;
          margin-right: 20px;
        }
      }
    }

    input[type=radio] {
      display: none;

      & + label {
        color: $slate60;
        font-size: 16px;
        position: relative;
        padding-left: 30px;
        @include transition(all, .3s, ease);

        &:hover {
          color: $slate70;

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

      & + label::before {
        content: "";
        display: inline-block;
        width: 18px;
        height: 18px;
        border: 1px solid $slate40;
        border-radius: 100%;
        position: absolute;
        top: 1px;
        left: 0;
        @include transition(all, .3s, ease);
      }

      & + label::after {
        content: "";
        height: 14px;
        width: 14px;
        background-color: $blue60;
        border-radius: 100%;
        position: absolute;
        top: 4px;
        left: 3px;
        opacity: 0;
        @include scale(.5);
        @include transition(all, .3s, ease);
      }

      &:checked {
        & + label::after {
          opacity: 1;
          @include scale(1);
        }

        & + label:before {
          border-color: $blue60;
        }
      }
    }
  }
}