.@{css-prefix}radio {
  user-select: none;
  font-size: 0;
  vertical-align: bottom;
  display: inline-block;
  label{
    cursor: pointer;
    display: inline-block;
    margin-bottom: 0;
    line-height: 0;
    color: @text-color-1;
  }
  & + .@{css-prefix}radio {
    margin-left: @padding-xl;
  }
  .bui-radio-input-wrapper{
    display: inline-block;
    vertical-align: top;
    position: relative;
    height: 16px;
    width: 16px;
    border: 1px solid @radio-border;
    border-radius: 100%;
    margin-top: 3px;
    margin-bottom: 2px;
    margin-right: 8px;
    &:after{
      content: '';
      position: absolute;
      background-color: @radio-dot-bg;
      border-radius: 100%;
      top: 3px;
      left: 3px;
      right: 3px;
      bottom: 3px;
      opacity: 0;
    }
    &:hover {
      border: 1px solid @radio-hover-border;
    }
    &:focus {
      border: 1px solid @radio-focus-border;
    }
  }
  &.secondary {
    .bui-radio-input-wrapper{
      &:after {
        background-color: @radio-dot-bg-secondary;
      }
      &:hover {
        border: 1px solid @radio-hover-border-secondary;
      }
      &:focus {
        border: 1px solid @radio-focus-border-secondary;
      }
    }
  }
  &.empty .bui-radio-input-wrapper{
    margin-right: 0;
  }
  .bui-radio-input-label {
    font-size: @font-size-md;
    line-height: @line-height-md;
    font-weight: @font-weight-regular;
  }
  .bui-radio-input{
    display: none;
  }
  &.checked{
    .bui-radio-input-wrapper{
      border-color: @radio-checked-border;
      &:after{
        opacity: 1;
        transition: opacity 0.18s;
      }
    }
    &.secondary {
      .bui-radio-input-wrapper{
        border-color: @radio-checked-border-secondary;
      }
    }
  }
  &.disabled{
    color: @disabled-default-color;
    label {
      cursor: not-allowed;
    }
    .bui-radio-input-wrapper{
      border-color: @radio-disabled-border;
      background-color: @radio-disabled-bg;
    }
    .bui-radio-input-label {
      color: @disabled-default-color;
    }
    &.checked{
      .bui-radio-input-wrapper{
        border-color: @radio-checked-disabled-border;
        background-color: @radio-disabled-bg;
        &:focus,
        &:hover {
          border-color: @radio-checked-disabled-border;
        }
        &:after{
          background-color: @radio-checked-disabled-border;
        }
      }
      &.secondary {
        .bui-radio-input-wrapper{
          border-color: @radio-checked-disabled-border-secondary;
          &:focus,
          &:hover {
            border-color: @radio-checked-disabled-border-secondary;
          }
          &:after{
            background-color: @radio-checked-disabled-border-secondary;
          }
        }
      }
    }
  }
}

.@{css-prefix}radio-rtl {
  direction: rtl;
  & + .@{css-prefix}radio {
    margin-right: @padding-xl;
    margin-left: 0;
  }
  .bui-radio-input-wrapper {
    margin-right: 0;
    margin-left: 8px;
  }
}