@import '../../../styles-new/default.less';
@import '../../../theme/components/radio.less';


@listPrefixCls: im-list-wrap;
@radioWarpPrefixCls: im-radio;
@radioInnerPrefixCls: ~"@{radioWarpPrefixCls}-inner";

.@{radioWarpPrefixCls} {
  input[type="radio"] {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  position: relative;
  vertical-align: middle;
  // width: @radio-input-size;
  // height: @radio-input-size;
  //width:@radio-icon-outer-size;
  //height: @radio-icon-outer-size;
  //修改外面占位宽高20
  width:20px;
  height:20px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;

  // 默认外圆
  .@{radioInnerPrefixCls} {
    position: absolute;
    //right: 0;
    // width: @radio-input-size;
    // height: @radio-input-size;
    //默认外圆宽度
    width: @radio-icon-outer-size;
    height: @radio-icon-outer-size;
    border-radius: 50%;
    border-width: 1.5 * @hd;
    border-style: solid;
    // border-color: @radio-checked-border-color;
    box-sizing: border-box;
    transform: rotate(0deg);
    border-color: @radio-icon-outer-border-color;
    background-color: @radio-icon-outer-fill-color;
  }

  >input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    border: none;
    appearance: none;
  }

  // 单选已选
  &.@{radioWarpPrefixCls}-checked {

    // 外圆
    .@{radioInnerPrefixCls} {
      border-color: @radio-icon-outer-border-color-checked;
      background-color: @radio-icon-outer-fill-color-checked;
    }

    // 内圆
    &::after {
      // position: absolute;
      display: block;
      top: 3 * @hd;
      right: 1.5* @hd;
      // z-index: 999;
      //width: 8 * @hd;
      //height: 8 * @hd;
      width: @radio-icon-inner-size;
      height: @radio-icon-inner-size;
      border-radius: 4 * @hd;
      border-color: @radio-icon-inner-border-color;
      background-color: @radio-icon-inner-fill-color;
      content: '\0020';
      animation: colorChange 500ms;
      z-index: 2
    }
  }

  // 单选禁用
  &.@{radioWarpPrefixCls}-disabled {

    // 外圆
    .@{radioInnerPrefixCls} {
      border-color: @radio-icon-outer-border-color-disable;
      background-color: @radio-icon-outer-fill-color-disable;
    }

    // 内圆
    &::after {
      background-color: @radio-icon-inner-fill-color-disable;
      border-color: @radio-icon-inner-border-color-disable;
    }
  }

  &-icon {
    margin-right: @h-spacing-md;
    // width: 28*@hd;
    //height: 28*@hd;
    width: @radio-card-image-width;
    height: @radio-card-image-height;
    border-radius: @radio-card-image-border-radius;
    vertical-align: middle;
    border-radius: 5px;
  }

  &-badge {
    margin-left: 5px;
    font-size: 12px;
    display: inline-block
  }

  &-cardIcon {
    margin-right: @h-spacing-md;
    width: 60px;
    height: 40*@hd;
    vertical-align: middle;
    border-radius: 5px;
  }

  &-badge {
    margin-left: 5px;
    font-size: 12px;
    display: inline-block
  }

  // &-rowWrap-height {
  //   height: 45px;
  // }

  &-rowWrap {
    display: flex;
    align-items: center;

  }


  &-item-origin-extra {
    min-height: 65px;
  }

  &-item-origin {
    min-height: unset;
    height: 45px;
  }

  &-item {
    box-sizing: border-box;
    position: relative;
    display: flex;
    //margin: 0 15*@hd;
    margin: 0 @radio-padding-horizontal;
    padding: @radio-padding-vertical 0;
    min-height: @radio-min-height;
    // padding: 15*@hd 0;
    // padding: 8px 0;
    // height:@radio-regular-hight;
    // min-height: 44px;
    // max-height: 67px;
    background-color: var(--fill-base-color);
    vertical-align: middle;
    overflow: hidden;
    transition: background-color 200ms;
    align-items: center;
    border-bottom: 1px transparent solid;

    &.@{radioWarpPrefixCls}-botderBottom {
      border-bottom: 1px #e5e5e5 solid;
    }
  }

  // 卡片-默认
  &-item-new {
    position: relative;
    display: flex;
    // margin-left: 15*@hd;
    padding: 0;
    // min-height: 44px;
    // max-height: 67px;
    background-color: @radio-card-fill-color;
    vertical-align: middle;
    overflow: hidden;
    transition: background-color 200ms;
    align-items: center;
    border: 1px @radio-card-border-color solid;
    border-radius: @radio-card-border-radius;
    margin-bottom: 5px;
    box-sizing: border-box;
    // top: -3px;

    .im-radio-content {
      // margin-left: 10px;
      width: 100%;

      .card-demo {
        // background-color: var(--color-gray);}
      }
    }

    &.@{radioWarpPrefixCls}-botderBottom {
      border-bottom: 1px #e5e5e5 solid;
    }
  }

  // 卡片-已选
  &-item-new-checked {

    position: relative;
    display: flex;
    // margin-left: 15*@hd;
    padding: 0;
    // min-height: 44px;
    // max-height: 67px;
    background-color: @radio-card-fill-color-checked;
    vertical-align: middle;
    overflow: hidden;
    transition: background-color 200ms;
    align-items: center;
    // border: 2px transparent solid;
    border-radius: 10px;
    margin-bottom: 5px;
    // &.@{radioWarpPrefixCls}-botderBottom {
    //   border-bottom: 1px #e5e5e5 solid;
    // }
    box-sizing: border-box;
    // top: -3px;
    border: 1px @radio-card-border-color-checked solid;

    .im-radio-content {
      // margin-left: 10px;

      .card-demo {
        // background-color: var(--color-gray);}
      }
    }
  }

  // 卡片-已选禁用
  &-item-new-checked-disable {

    position: relative;
    display: flex;
    // margin-left: 15*@hd;
    padding: 0;
    // min-height: 44px;
    // max-height: 67px;
    background-color: @radio-card-fill-color-checked-disable;
    vertical-align: middle;
    overflow: hidden;
    transition: background-color 200ms;
    align-items: center;
    border: 1px @radio-card-border-color-checked-disable solid;
    border-radius: 10px;
    margin-bottom: 5px;

    // &.@{radioWarpPrefixCls}-botderBottom {
    //   border-bottom: 1px #e5e5e5 solid;
    // }
    // border: 2px red solid;
    .im-radio-content {
      // margin-left: 10px;

      .card-demo {
        background-color: var(--color-gray);
      }
    }
  }

  // 卡片-未选禁用
  &-item-new-unchecked-disable {

    position: relative;
    display: flex;
    // margin-left: 15*@hd;
    padding: 0;
    // min-height: 44px;
    // max-height: 67px;
    background-color: @radio-card-fill-color-disable;
    vertical-align: middle;
    overflow: hidden;
    transition: background-color 200ms;
    align-items: center;
    // border: 2px transparent solid;
    border-radius: 10px;
    margin-bottom: 5px;
    border: 1px @radio-card-border-color-disable solid;

    // &.@{radioWarpPrefixCls}-botderBottom {
    //   border-bottom: 1px #e5e5e5 solid;
    // }
    // border: 2px red solid;
    .im-radio-content {
      // margin-left: 10px;

      .card-demo {
        background-color: var(--color-gray);
      }
    }

  }

  // type为card
  &-item-new-card {
    text-align: center;
    padding: @radio-card-padding-vertical @radio-card-padding-horizontal;
    flex-wrap: wrap;
    min-height: 75px;

    .@{radioWarpPrefixCls}-content {
      font-size: @radio-lable-font-size;
      color: @radio-lable-color;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;

      >div {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .im-radio-label {
        max-width: calc(100% - @radio-card-padding-horizontal*2);
        min-width: 70px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        // padding-bottom: 8px;
        // line-height: 1;
        color: @radio-card-title-color;
        font-size: @radio-card-title-font-size;
      }

      .im-list-brief {
        padding-top: 5px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        overflow: hidden;
        // line-height: 1;
        font-size: @radio-card-tertiary-font-size;
        color: @radio-card-tertiary-color;
      }
    }

    .@{radioWarpPrefixCls}-extra {
      position: absolute;
      top: 0*@hd;
      right: 0*@hd;
      // left: 0;
      // bottom: 0;
    }
  }

  &-item-new-card-row {
    width: calc(50% - 30px);
  }

  &-item-new-card-unrow {
    width: calc(100% - 30px);
  }

  &-thumb {
    margin-right: 5px;
  }

  // 卡片
  &-line-new {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    // 右上角
    .@{radioWarpPrefixCls}-extra {

      // 默认
      // .@{radioWarpPrefixCls}-checked-new {
      //   width: 0;
      //   height: 0;
      //   border-top: 14px solid @radio-card-badge-fill-color;
      //   border-right: 14px solid @radio-card-badge-fill-color;
      //   border-radius: 0;
      //   border-bottom: 14px solid transparent;
      //   border-left: 14px solid transparent;
      //   border-radius: 0 8px 0;

      //   .im-icon {
      //     width: 14px;
      //     height: 14px;
      //     color: @radio-card-icon-color;
      //     position: absolute;
      //     font-size: 10px;
      //     top: 3px;
      //     right: 3px;
      //     line-height: 14px;
      //   }

      //   // &::after {
      //   //   content: '√';
      //   //   color: @radio-card-icon-color;
      //   //   position: absolute;
      //   //   font-size: 10px;
      //   //   top: 2px;
      //   //   line-height: 14px;
      //   // }
      // }

      // // 未选
      // .@{radioWarpPrefixCls}-unChecked-Tick {
      //   border-top: 14px solid @radio-card-badge-fill-color;
      //   border-right: 14px solid @radio-card-badge-fill-color;

      //   .im-icon {
      //     color: @radio-card-icon-color;
      //   }

      //   // &::after {
      //   //   color: @radio-card-icon-color;
      //   // }
      // }

      // // 已选
      // .@{radioWarpPrefixCls}-checked-Tick {
      //   border-top: 14px solid @radio-card-badge-fill-color-checked;
      //   border-right: 14px solid @radio-card-badge-fill-color-checked;

      //   .im-icon {
      //     color: @radio-card-icon-color-checked;
      //   }

      //   // &::after {
      //   //   color: @radio-card-icon-color-checked;
      //   // }
      // }

      // // 未选禁用
      // .@{radioWarpPrefixCls}-unChecked-disable {
      //   border-top: 14px solid @radio-card-badge-fill-color-disable;
      //   border-right: 14px solid @radio-card-badge-fill-color-disable;

      //   .im-icon {
      //     color: @radio-card-icon-color-disable;
      //   }

      //   // &::after {
      //   //   color: @radio-card-icon-color-disable;
      //   // }
      // }

      // // 选中禁用
      // .@{radioWarpPrefixCls}-Checked-disable {
      //   border-top: 14px solid @radio-card-badge-fill-color-checked-disable;
      //   border-right: 14px solid @radio-card-badge-fill-color-checked-disable;

      //   .im-icon {
      //     color: @radio-card-icon-color-checked-disable;
      //   }

      //   // &::after {
      //   //   color: @radio-card-icon-color-checked-disable;
      //   // }

      //   // background: url('img/checkbox-card-selected-disable.svg') no-repeat;
      //   // width: 25*@hd;
      //   // height: 25*@hd;
      //   // background-size: 100% 100%;
      // }

    }
  }

  &-line {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    // padding: 4px 0;

    .@{radioWarpPrefixCls}-content {
      font-size: @radio-lable-font-size;
      color: @radio-lable-color;
      display: flex;
      align-items: center;

      .im-radio-label {
        // max-width: 66vw;
        // min-width: 70px;
        // overflow: hidden;
        // white-space: nowrap;
        // text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        text-overflow: ellipsis;
        overflow: hidden;
        // padding-bottom: 8px;
        // line-height: 1;
        color: @radio-lable-color;
        font-size: @radio-lable-font-size;
      }

      .im-list-brief {
        padding-top: 5px;
        font-size: @radio-tertiary-font-size;
        color: @radio-tertiary-color;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        overflow: hidden;
        line-height: 1.3;
      }


    }
  }

  &-item-disabled {
    .@{radioWarpPrefixCls}-content {
      .@{radioWarpPrefixCls}-label {
        color: @radio-lable-color-disable;
      }

      .im-list-brief {
        color: @radio-tertiary-color-disable;
      }
    }
  }

  // &-extra {
  //   position: absolute;
  //   top: 0*@hd;
  //   right: 0*@hd;
  //   // left: 0;
  //   // bottom: 0;
  // }

  &-checked-right {
    width: 28*@hd;
    height: 28*@hd;
    border-radius: 50%;
    // margin-right: 10px;
  }

  // &-checked-new {
  //   width: 28*@hd;
  //   height: 28*@hd;

  // }
  &-checked-Tick {
    background: url('img/checkbox-card-selected.svg') no-repeat;
    width: 28*@hd;
    height: 28*@hd;
    background-size: 100% 100%;
  }

  &-unChecked-Tick {
    background: url('img/checkbox-card-unselected.svg') no-repeat;
    width: 25*@hd;
    height: 25*@hd;
    background-size: 100% 100%;
  }

  &-unChecked-disable {
    background: url('img/checkbox-card-unselected-disable.svg') no-repeat;
    width: 25*@hd;
    height: 25*@hd;
    background-size: 100% 100%;
  }

  &-Checked-disable {
    background: url('img/checkbox-card-selected-disable.svg') no-repeat;
    width: 25*@hd;
    height: 25*@hd;
    background-size: 100% 100%;
  }

  &-checked-redTick {
    background: url('img/redTick.png') no-repeat;
    // display: inline-block;
    background-size: 100%;
    width: 25*@hd;
    height: 25*@hd;
    border-radius: 50%;
    // margin-right: 10px;
  }

}



.@{listPrefixCls} {
  & &-item {

    &.@{radioWarpPrefixCls}-item {

      font-size: @font-size-base;
      color: @color-text-paragraph;
      font-weight: 400;

    }

    &.@{radioWarpPrefixCls}-item-disabled {
      .@{listPrefixCls}-content {
        color: @color-text-disabled;

        .@{listPrefixCls}-brief {
          margin-top: 5*@hd;
          color: @color-text-caption ;
          font-size: @font-size-caption-sm ;
        }
      }
    }
  }

  .@{listPrefixCls}-brief {
    margin-top: 5*@hd;
    color: @color-text-caption ;
    font-size: @font-size-caption-sm ;
  }
}

@keyframes colorChange {
  0% {
    background-color: transparent;
  }

  100% {
    background-color: @radio-input-icon-color;
  }
}