@import '../styles/themes/themes.less';

.@{bk-prefix}-radio-group {
  display: inline-flex;
  letter-spacing: normal;
}


.@{bk-prefix}-radio {
  display: inline-flex;
  align-items: center;
  font-weight: normal;
  letter-spacing: normal;
  color: @radio-font-color;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  user-select: none;

  & ~ .@{bk-prefix}-radio {
    margin-left: 24px;
  }
  &.@{bk-prefix}-radio-small {
    .@{bk-prefix}-radio-label {
      font-size: @font-size-base;
    }
  }

  &.is-checked {
    .@{bk-prefix}-radio-input {
      padding: 3px;
      color: @radio-active-color;
      background-color: @radio-active-color;
      border-color: @radio-active-color;
    }
  }

  &.is-disabled {
    color: @radio-disabled-font-color;
    cursor: not-allowed;

    &.is-checked {
      .@{bk-prefix}-radio-input {
        background-color: @radio-disabled-checked-bg;
        border-color: @radio-disabled-checked-bg;
      }
    }

    .@{bk-prefix}-radio-input {
      cursor: not-allowed;
      border-color: @radio-disabled-border;
    }

    .@{bk-prefix}-radio-label {
      cursor: not-allowed;
    }
  }

  &.is-focused {
    .@{bk-prefix}-radio-input {
      border-color: @radio-active-color;
    }
  }
}

.@{bk-prefix}-radio-input {
  position: relative;
  display: inline-block;
  width: @line-height-base;
  height: @line-height-base;
  color: #fff;
  vertical-align: middle;
  cursor: pointer;
  background-color: #fff;
  border: @border-width-base @border-style-base @light-gray;
  border-radius: 50%;
  outline: none;
  visibility: visible;
  transition: all .3s;
  background-clip: content-box;
  appearance: none;

  &:hover {
    border-color: @radio-hover-border-color;
  }
}

.@{bk-prefix}-radio-label {
  margin-left: 6px;
  font-size: @font-size-medium;
  font-style: normal;
  font-weight: normal;
  vertical-align: middle;
  cursor: pointer;
}

// 按钮样式
.@{bk-prefix}-radio-button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  font-weight: normal;
  letter-spacing: normal;
  color: @radio-font-color;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  opacity: 1;
  user-select: none;

  @sizeSelectors: small, large;

  @btnHeight: @component-size-base;
  @btnPadding: @component-size-base-padding;
  @btnBorderRadius: @border-radius-base;

  @smallBtnHeight: @component-size-small;
  @smallBtnPadding: @component-size-small-padding;
  @smallBtnFontSize: @font-size-base;

  @largeBtnHeight: @component-size-large;
  @largeBtnPadding: @component-size-large-padding;
  @largeBtnFontSize: @font-size-large;

  each(@sizeSelectors, {
    @sizeBtnHeight: '@{value}BtnHeight';
    @sizeBtnPadding: '@{value}BtnPadding';
    @sizeBtnFontSize: '@{value}BtnFontSize';

    &.@{bk-prefix}-radio-button-@{value}{
      .@{bk-prefix}-radio-button-label{
        height: @@sizeBtnHeight;
        padding: @@sizeBtnPadding;
        font-size: @@sizeBtnFontSize;
        line-height: @@sizeBtnHeight;
      }
    }
  });


  .@{bk-prefix}-radio-button-input {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    outline: none;
    opacity: 0;
  }

  .@{bk-prefix}-radio-button-label {
    width: 100%;
    padding: @btnPadding;
    font-size: @font-size-base;
    font-style: normal;
    font-weight: normal;
    line-height: @component-size-base;
    color: @default-color;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    transition: all .3s;

  }

  &.is-checked {
    z-index: 2;

    .@{bk-prefix}-radio-button-label {
      color: @radio-active-color;
    }
  }

  &.is-disabled {
    z-index: 0;
    color: @radio-disabled-font-color;
    cursor: not-allowed;

    .@{bk-prefix}-radio-button-label {
      cursor: not-allowed;
    }
  }
}

.@{bk-prefix}-radio-capsule {
  padding: 4px;
  background: #f0f1f5;
  border-radius: 2px;

  .@{bk-prefix}-radio-button {
    border-radius: 2px;

    &:before {
      position: absolute;
      top: 50%;
      right: -1px;
      display: block;
      width: 1px;
      height: 12px;
      margin-top: -6px;
      background: #dcdee5;
      content: '';
    }

    &:last-of-type::before {
      display: none;
    }
  }

  .@{bk-prefix}-radio-button-label {
    position: relative;
    height: 24px;
    padding: 0 12px;
    line-height: 24px;

  }

  .is-checked {
    background: #fff;

    &:before {
      display: none;
    }
  }
}

.@{bk-prefix}-radio-tab,
.@{bk-prefix}-radio-card {

  .@{bk-prefix}-radio-button {
    overflow: hidden;

    &:nth-child(n+2) {
      margin-left: -1px;
    }

    &:first-child {
      .@{bk-prefix}-radio-button-label {
        border-bottom-left-radius: @border-radius-base;
        border-top-left-radius: @border-radius-base;
      }
    }

    &:last-child {
      .@{bk-prefix}-radio-button-label {
        border-top-right-radius: @border-radius-base;
        border-bottom-right-radius: @border-radius-base;
      }
    }

    &.is-checked {
      z-index: 2;

      .@{bk-prefix}-radio-button-label {
        background: @radio-button-checked-bg;
        border-color: @radio-active-color;
      }
    }

    &.is-disabled {
      .@{bk-prefix}-radio-button-label {
        background: @radio-button-disabled-checked-bg;
        border-color: @radio-disabled-border;
      }
    }

    &.is-focused {
      .@{bk-prefix}-radio-button-label {
        border-color: @radio-active-color;
      }
    }

  }

  .@{bk-prefix}-radio-button-label {
    height: @component-size-base;
    border: @border-width-base @border-style-base @light-gray;
    transition: all .3s;

    &:hover {
      border-color: @radio-hover-border-color;
    }
  }

}

.@{bk-prefix}-radio-card {
  display: flex;
  width: 100%;

  .@{bk-prefix}-radio-button {
    flex: 1;
    display: block;
  }
}
