@radio-disabled-opacity: @disabled-opacity;
@radio-width: 2px;
@radio-checked-width: 7px;
@radio-size: 22px;
@radio-border-color: @stone;

.igloo-radio-group {
  width: 100%;

  .igloo-radio-group-button {
    width: 100%;
    padding: 0 16px;

    & > span:last-child {
      display: block;
      width: 100%;
      height: 100%;
    }

    .igloo-radio-group-button-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 100%;

      .igloo-radio-button-radio {
        width: @radio-size;
        height: @radio-size;
        border-radius: @radio-size;
        border: @radio-width solid @radio-border-color;
      }

      .igloo-radio-button-radio-checked {
        border-width: @radio-checked-width;
        border-color: @primary-color;
      }

      .igloo-radio-button-radio-disabled {
        opacity: @radio-disabled-opacity;
      }
    }
  }

  .igloo-radio-group-normal {
    &:not(:first-child) {
      margin-top: 4px;
    }

    .ant-radio-wrapper {
      align-items: center;

      .ant-radio + span {
        white-space: pre-wrap;
        word-break: break-word;
      }
    }

    .igloo-radio-extra {
      font-size: 16px;
      padding-left: 30px;
    }
  }
}

.igloo-radio {
  .ant-radio {
    display: flex;
  }

  .ant-radio-inner,
  .ant-radio-button-inner {
    display: inline-block;
    width: @radio-size;
    height: @radio-size;
    border-width: @radio-width;
    border-color: @radio-border-color;
  }

  .ant-radio-checked {
    .ant-radio-inner,
    .ant-radio-button-inner {
      border-width: @radio-checked-width;
      transition: none;
      background-color: @white;
    }

    &.ant-radio-disabled {
      .ant-radio-inner,
      .ant-radio-button-inner {
        border-color: @primary-color;

        &::after {
          display: none;
        }
      }
    }
  }

  .ant-radio-disabled {
    .ant-radio-inner,
    .ant-radio-button-inner {
      background: @white;
      opacity: @radio-disabled-opacity;
    }
  }
}