@import "../common/varible";
@import "../common/function";

.yu-radio {
  font-family: $font-family;
  font-size: 0;
  color: $text;
  cursor: pointer;
  margin-right: $space-small;
  & > span {
    font-size: $normal;
    @include unselectable();
  }
  & > .radio {
    font-size: $normal;
    & > input {
      display: none;
    }
    transition: border .1s;
    margin-right: 6px;
    margin-bottom: -2px;
    display: inline-block;
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    border: 1px solid $border-dark;
    border-radius: 50%;
    background-color: #fff;
    &:hover {
      border: 1px solid $primary;
    }
  }
  &.vertical {
    display: block !important;
  }
  &.checked {
    & > .radio {
      width: 16px;
      height: 16px;
      border: 5px solid $primary;
    }
  }

  &.disabled {
    color: $text-lighter;
    & > .radio:hover {
      border: 1px solid lighten($border, 1);
    }
  }

  &.checked.disabled {
    & > .radio {
      width: 16px;
      height: 16px;
      border: 5px solid lighten($border, 1);
      & + span {
        color: $text-lighter;
      }
      &:hover {
        border: 5px solid lighten($border, 1);
      }
    }
  }


}

.yu-radio-group {
  margin-bottom: $space;
  &.vertical {
    & > .yu-radio {
      display: block;
      margin-bottom: $space;
    }
  }
}