.radio-container {
  font-size: 12px;
  white-space: nowrap;
  outline: none;
  display: inline-block;
  position: relative;
  line-height: 1;
  vertical-align: middle;
  cursor: pointer;

  input[type=radio] {
    position: absolute;
    left: 0;
    z-index: 1;
    cursor: pointer;
    opacity: 0;
    top: 0;
    bottom: 0;
    right: 0
  }

  .radio-inner {
    position: relative;
    top: 3px;
    left: 0;
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 14px;
    border: 1px solid #d9d9d9;
    background-color: #fff;

    .radio-inner,.radio-inner:after {
      -webkit-transition: all .2s cubic-bezier(.78,.14,.15,.86);
      transition: all .2s cubic-bezier(.78,.14,.15,.86)
    }

    &:after {
      position: absolute;
      width: 6px;
      height: 6px;
      left: 3px;
      top: 3px;
      border-radius: 6px;
      display: table;
      border-top: 0;
      border-left: 0;
      content: ' ';
      background-color: #58b4e9;
      opacity: 0;
      -webkit-transform: scale(0);
      transform: scale(0)
    }
  }

  &.checked .radio-inner {
    border-color: #d9d9d9;
    &:after {
      -webkit-transform: scale(1);
      transform: scale(1);
      opacity: 1;
      -webkit-transition: all .2s cubic-bezier(.78,.14,.15,.86);
      transition: all .2s cubic-bezier(.78,.14,.15,.86)
    }
  }

  &.disabled .radio-inner {
    border-color: #d9d9d9;
    background-color: #f3f3f3;
    &:hover{
      border-color: #d9d9d9
    }
    &:after{
      background-color: #ccc
    }
  }

}




