.ve-radio *,
.ve-radio *:before,
.ve-radio *:after {
  box-sizing: border-box;
}

.ve-radio {
  margin: 0 8px 0 0;

  &,
  .ve-radio-container {
    padding: 0;
    color: #000000d9;
    font-size: 14px;
    line-height: 22px;
    list-style: none;
    position: relative;
    display: inline-block;
    white-space: nowrap;
    cursor: pointer;
  }

  // container
  .ve-radio-container {
    margin: 0;
    top: -1px;
    line-height: 1;
    vertical-align: sub;
    outline: none;

    // radio input
    .ve-radio-input {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1;
      cursor: pointer;
      opacity: 0;
    }

    // radio inner
    .ve-radio-inner {
      position: relative;
      top: 0;
      left: 0;
      display: block;
      width: 16px;
      height: 16px;
      background-color: #fff;
      border: 1px solid #d9d9d9;
      border-radius: 100px;
      transition: all 0.3s;

      &:after {
        position: absolute;
        top: 3px;
        left: 3px;
        display: table;
        width: 8px;
        height: 8px;
        background-color: var(--ve-radio-checked-background-color);
        border-top: 0;
        border-left: 0;
        border-radius: 8px;
        transform: scale(0);
        opacity: 0;
        transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
        content: " ";
      }
    }

    // 选中效果
    &.ve-radio-checked {
      &:after {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 1px solid var(--ve-radio-checked-border-color);
        border-radius: 50%;
        visibility: hidden;
        animation-fill-mode: both;
        content: "";
      }

      .ve-radio-inner {
        border-color: var(--ve-radio-checked-border-color);
      }

      .ve-radio-inner:after {
        transform: scale(1);
        opacity: 1;
        transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
      }
    }

    // 禁用效果
    &.ve-radio-disabled {
      .ve-radio-input {
        cursor: not-allowed;
      }

      .ve-radio-inner {
        background-color: #f5f5f5;
        border-color: #d9d9d9 !important;
        cursor: not-allowed;

        &:after {
          background-color: #00000033;
        }
      }

      &+span {
        color: rgba(0, 0, 0, 0.25);
        cursor: not-allowed;
      }
    }
  }

  // label
  &-label {
    padding: 0 4px;
    color: var(--ve-radio-label-text-color);
  }
}