@import "mixins/mixins";
@import "common/var";

@include b(radio-group) {
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
  font-size: 0;
  vertical-align: text-bottom;
  // border: $--border-base;
  // border-radius: 4px;
  // background: $--color-bg-3;
  .el-radio__label {
    top: 2px;
  }

  &.el-radio-group-linear {
    // background: $--color-bg-3;
    // border-radius: 4px;
    border-radius: $--border-radius-medium;

    .el-radio-button__inner {
      background: $--button-default-background-color;
      color: $--color-info-semi;
      border: $--border-1 solid $--radio-group-button-border-color;
      border-right: 0;
      // border-radius: 0;
      border-radius: $--border-radius-none;
      font-weight: $--font-weight-400;
      transition: border 0s;
    }

    .el-radio-button--large {
      .el-radio-button__inner {
        padding: 6px 16px;
      }
    }

    .el-radio-button--medium {
      .el-radio-button__inner {
        padding: 4px 16px;
      }
    }

    .el-radio-button--small {
      .el-radio-button__inner {
        padding: 2px 16px;
      }
    }

    .el-radio-button--mini {
      .el-radio-button__inner {
        padding: 0px 12px;
      }
    }

    .el-radio-button:first-child{
      .el-radio-button__inner {
        border-radius: $--border-radius-medium $--border-radius-none $--border-radius-none $--border-radius-medium;
      }
      &.is-active{
        .el-radio-button__inner {
          border-right: 1px solid;
        }
      }
    }

    .el-radio-button:last-child .el-radio-button__inner {
      border-right: $--border-1 solid $--radio-group-button-border-color;
      // border-radius: 0 4px 4px 0;
      border-radius: $--border-radius-none $--border-radius-medium $--border-radius-medium $--border-radius-none;
    }
    .el-radio-button--mini:first-child .el-radio-button__inner{
      border-radius: $--border-radius-small $--border-radius-none $--border-radius-none $--border-radius-small;
    }
    .el-radio-button--mini:last-child .el-radio-button__inner{
      border-radius:  $--border-radius-none $--border-radius-small $--border-radius-small $--border-radius-none;
    }

    .el-radio-button:last-child .el-radio-button__orig-radio:checked + .el-radio-button__inner {
      border-right: $--border-1 solid $--color-primary;
    }
    .el-radio-button:not(:last-child):not(:first-child) .el-radio-button__orig-radio:checked + .el-radio-button__inner{
      border-radius: initial;
      border-right: 1px solid;
    }

    .el-radio-button.is-active + .el-radio-button .el-radio-button__inner {
      // border-left-color: $--color-primary;
      border-left: 0;
    }

    .el-radio-button:not(.is-disabled):not(.is-active):hover {
      .el-radio-button__inner {
        color: $--color-text-secondary;
      }
    }

    .el-radio-button.is-disabled {
      .el-radio-button__inner{
        background: initial;
        color: $--radio-group-button-disabled-text-color;
      }
    }
    .el-radio-button.is-active.is-disabled .el-radio-button__inner {
      color: $--primary-3;
      border-color: $--primary-3 !important;
    }
    .el-radio-button.is-active.is-disabled + .el-radio-button .el-radio-button__inner {
      border-left-color: $--primary-3;
    }

  }

  &.el-radio-group-plane {
    display: inline-block;
    // line-height: 1;
    vertical-align: middle;
    // font-size: 0;
    // border: $--border-base;
    // border-radius: 4px;
    border-radius: $--border-radius-medium;
    background: $--color-bg-3;
    font-weight: $--font-weight-500;
    // padding-left: 2px;
    .el-radio-button--small,
    .el-radio-button--large,
    .el-radio-button--medium {
      padding: 4px 4px 4px 0;
      &:first-child {
        padding-left: 4px;
      }
    }
    .el-radio-button--mini {
      padding: 2px 2px 2px 0;
      border-radius: $--border-radius-small;
      &:first-child {
        padding-left: 2px;
      }
    }

    > label:first-of-type {
      .el-radio-button--small,
      .el-radio-button--large,
      .el-radio-button--medium,
      .is-active {
        padding-left: 2px;
      }
    }
    .el-radio-button.is-active.is-disabled .el-radio-button__inner {
      color: $--primary-3 !important;
      background: #fff !important;
    }
    .el-radio-button--mini .el-radio-button__inner{
      border-radius: $--border-radius-small;
    }
  }
}