.ps-radio {
  [type="radio"] {
    position: absolute;
    left: -9999px;

    & + label {
      position: relative;
      padding-left: 28px;
      cursor: pointer;
      line-height: 20px;
      display: inline-block;
      color: $gray-dark;

      &:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 18px;
        height: 18px;
        border: 2px solid $gray-medium;
        border-radius: 100%;
        background: #ffffff;
      }

      &:after {
        content: '';
        width: 10px;
        height: 10px;
        background: $primary;
        position: absolute;
        top: 4px;
        left: 4px;
        border-radius: 100%;
        transition: all 0.2s ease;
      }
    }

    &:checked + label {
      &:before {
        border: 2px solid $primary;
      }

      &:after {
        opacity: 1;
        transform: scale(1);
      }
    }

    &:not(:checked) + label:after {
      opacity: 0;
      transform: scale(0);
    }

  }
}