@import "./variables.scss";
@import "~@alifd/next/lib/core/style/_global";
@import "~@alifd/next/lib/core/style/_motion";
@import "~@alifd/next/lib/radio/scss/variable";

//large尺寸
#{$radio-prefix}-wrapper {
  &.#{$css-prefix}xl {
    @include radio-sizing($b-design-radio-xl-size);

    &.checked {
      @include radio-checked-sizing($b-design-radio-xl-circle-size);
    }

    #{$radio-prefix}-label {
      font-size: $b-design-radio-xl-font-size;
    }
  }

  &.#{$css-prefix}large {
    @include radio-sizing($b-design-radio-large-size);

    &.checked {
      @include radio-checked-sizing($b-design-radio-large-circle-size);
    }

    #{$radio-prefix}-label {
      font-size: $b-design-radio-large-font-size;
    }
  }

  &.#{$css-prefix}medium {
    @include radio-sizing($b-design-radio-medium-size);

    &.checked {
      @include radio-checked-sizing($b-design-radio-medium-circle-size);
    }

    #{$radio-prefix}-label {
      font-size: $b-design-radio-medium-font-size;
    }
  }

  &.#{$css-prefix}small {
    @include radio-sizing($b-design-radio-small-size);

    &.checked {
      @include radio-checked-sizing($b-design-radio-small-circle-size);
    }

    #{$radio-prefix}-label {
      font-size: $b-design-radio-small-font-size;
    }
  }
}

#{$radio-prefix} {
  &-button.#{$css-prefix} {
    &large {
      .#{$css-prefix}radio-wrapper .#{$css-prefix}radio-label {
        font-size: 14px;
      }
    }

    &xs {
      >label {
        padding: 0 $b-design-radio-button-padding-xs;
        height: $b-design-radio-button-height-xs;
        line-height: $b-design-radio-button-height-xs;

        &:first-child {
          margin-left: 0;
          border-top-left-radius: $radio-button-corner-large;
          border-bottom-left-radius: $radio-button-corner-large;
        }

        &:last-child {
          border-top-right-radius: $radio-button-corner-large;
          border-bottom-right-radius: $radio-button-corner-large;
        }
      }

      #{$radio-prefix}-label {
        height: calc(#{$b-design-radio-button-height-xs} - 2px);
        line-height: calc(#{$b-design-radio-button-height-xs} - 2px);
        font-size: $radio-button-font-size-medium;
      }
    }

    &grey {
      >label {
        border: 1px solid $b-design-radio-button-border-color;
        background-color: $b-design-radio-button-bg-color;

        &:hover,
        &.hovered {
          z-index: 10;
          border-color: $radio-button-border-color-hovered;
          background-color: $radio-button-bg-color-hovered;

          #{$radio-prefix}-label {
            color: $radio-button-font-color-hovered;
          }
        }

        &.checked {
          z-index: 11;
          border-color: $radio-button-border-color-checked;
          background-color: $radio-button-bg-color-checked;

          #{$radio-prefix}-label {
            color: $radio-button-font-color-checked;
          }
        }


        &.disabled {
          z-index: 0;
          cursor: not-allowed;
          border-color: $b-design-radio-button-border-color;
          background-color: $b-design-radio-button-bg-color;

          #{$radio-prefix}-label {
            color: $radio-button-font-color-disabled;
          }
        }

        &.checked.disabled {
          z-index: 0;
          border-color: $radio-button-border-color-checked-disabled;
          background-color: $radio-button-bg-color-checked-disabled;

          #{$radio-prefix}-label {
            color: $radio-button-font-color-checked-disabled;
          }
        }
      }
    }

    &grey.#{$css-prefix}solid,
    &solid {
      &>label {
        &.checked {
          background-color: $radio-button-border-color-checked;

          #{$radio-prefix}-label {
            color: $radio-button-bg-color-checked;
          }

        }

        &.checked.disabled {
          border-color: $radio-button-border-color-checked;
        }
      }
    }

    &container {
      padding: 4px;
      background-color: $radio-button-bg-color;
      border-radius: $radio-button-corner-large;

      &>label {
        border: 0px;
      }

      &>label.#{$css-prefix}radio-wrapper {
        border-radius: $radio-button-corner-large;
        margin-right: 4px;

        &:last-child {
          margin-right: 0px;
        }

        &:hover,
        &.hovered {
          z-index: 10;
          border-color: transparent;
          background-color: transparent;

          #{$radio-prefix}-label {
            color: $b-design-radio-button-font-color-hovered;
          }
        }

        &.checked {
          z-index: 11;
          border-color: $radio-button-bg-color-checked;
          background-color: $radio-button-bg-color-checked;

          #{$radio-prefix}-label {
            color: $radio-button-font-color-checked;
          }
        }

        &.disabled {
          z-index: 0;
          cursor: not-allowed;
          border-color: $radio-button-border-color-disabled;
          background-color: $radio-button-bg-color-disabled;

          #{$radio-prefix}-label {
            color: $radio-button-font-color-disabled;
          }
        }

        &.checked.disabled {
          z-index: 0;
          border-color: $radio-button-bg-color-checked-disabled;
          background-color: $radio-button-bg-color-checked-disabled;

          #{$radio-prefix}-label {
            color: $radio-button-font-color-checked-disabled;
          }
        }
      }

      //尺寸调整
      &.#{$css-prefix}large>label,
      &.#{$css-prefix}large .#{$css-prefix}radio-label {
        height: $b-design-radio-button-container-height-l;
        line-height: $b-design-radio-button-container-height-l;
      }

      &.#{$css-prefix}medium>label,
      &.#{$css-prefix}medium .#{$css-prefix}radio-label {
        height: $b-design-radio-button-container-height-m;
        line-height: $b-design-radio-button-container-height-m;
      }

      &.#{$css-prefix}small>label,
      &.#{$css-prefix}small .#{$css-prefix}radio-label {
        height: $b-design-radio-button-container-height-s;
        line-height: $b-design-radio-button-container-height-s;
      }

      &.#{$css-prefix}xs>label,
      &.#{$css-prefix}xs .#{$css-prefix}radio-label {
        height: $b-design-radio-button-container-height-xs;
        line-height: $b-design-radio-button-container-height-xs;
      }
    }

    &grey.#{$css-prefix}container {
      background-color: $b-design-radio-button-bg-color;

      &>label.#{$css-prefix}radio-wrapper {
        border-radius: $radio-button-corner-large;
        margin-right: 4px;

        &.checked {
          z-index: 11;
          border-color: $b-design-grey-radio-button-bg-color-checke;
          background-color: $b-design-grey-radio-button-bg-color-checke;

          #{$radio-prefix}-label {
            color: $radio-button-font-color-checked;
          }
        }

        &.disabled {
          z-index: 0;
          cursor: not-allowed;
          border-color: transparent;
          background-color: transparent;

          #{$radio-prefix}-label {
            color: $radio-button-font-color-disabled;
          }
        }

        &.checked.disabled {
          z-index: 0;
          border-color: $b-design-grey-radio-button-bg-color-checked-disabled;
          background-color: $b-design-grey-radio-button-bg-color-checked-disabled;

          #{$radio-prefix}-label {
            color: $radio-button-font-color-checked-disabled;
          }
        }
      }
    }

    //新增label分割线
    &solid,
    &outline {
      label:not(:first-child):not(.checked):before {
        content: '';
        width: 1px;
        height: calc(100% - #{$b-design-radio-button-line-height-l});
        background-color: #e5e5e5;
        position: absolute;
        left: -1px;
        top: calc(#{$b-design-radio-button-line-height-l} / 2);
      }

      &.#{$css-prefix}xs,
      &.#{$css-prefix}small {
        label:not(:first-child):not(.checked):before {

          height: calc(100% - #{$b-design-radio-button-line-height-s});

          top: calc(#{$b-design-radio-button-line-height-s} / 2);
        }
      }
    }


  }

  &-button>label.disabled {
    z-index: 9;
  }

  &-button>label.checked.disabled {
    z-index: 9;
  }
}