// @import "../_utils.scss";
// @import "./icon.scss";

@include checkboxFn();
.#{$checkbtn-prefix-cls} {
  &-wrapper {
    display: inline-block;
    position: relative;
    @if $--size-switch == yes {
      font-size: $--size-font-size-base;
      border-color: $border-color-base;
      border-style: solid;
      @include computed-height-btn($--size-height-base, normal, 1px);
    } @else {
      height: $form-component-height;
      line-height: $form-component-height;
      padding: $checkbox-wrapper-padding;
      border: solid 1px $border-color-base;
      font-size: $checkbox-wrapper-font-size;
    }
    border-radius: $checkbox-wrapper-border-radius;
    cursor: pointer;
    user-select: none;

    @include theme-border-color($__checkbtn_border-color);
    @include theme-font-color($__checkbtn_font-color);
    @include theme-background-color($__checkbtn_background-color);

    &:hover {
      @include theme-border-color($__checkbtn_hover_border-color);
      @include theme-font-color($__checkbtn_hover_font-color);
    }
  }

  &-wrapper-selected {
    border: solid 1px $primary-color;
    color: $primary-color;

    @include theme-border-color($__checkbtn_selected_border-color);
    @include theme-font-color($__checkbtn_selected_font-color);
    .#{$checkbtn-prefix-cls}-icon {
      position: absolute;
      @if $--size-switch == yes {
        line-height: $form-component-height;
      }
      right: $checkbox-wrapper-selected-icon-right;
      top: $checkbox-wrapper-selected-icon-top;
      width: $checkbox-wrapper-selected-icon-width;
      height: $checkbox-wrapper-selected-icon-height;
      border-width: $checkbox-wrapper-selected-icon-border-width;
      border-style: solid;
      border-color: transparent $primary-color transparent transparent;

      @include theme-border-right-color($__checkbtn-icon_selected_border-color);

      i {
        font-size: $checkbox-wrapper-selected-icon-i-font-size;
        position: absolute;
        top: $checkbox-wrapper-selected-icon-i-top;
        right: $checkbox-wrapper-selected-icon-i-right;
        color: $checkbox-wrapper-selected-icon-i-color;

        @include theme-font-color($__checkbtn-icon-i_selected_font-color);
      }
    }

    &:hover {
      @include theme-border-color($__checkbtn_selected_border-color);
      @include theme-font-color($__checkbtn_selected_font-color);
    }
  }

  &-wrapper-disabled {
    &,
    &:hover,
    &:focus,
    &:active,
    &.active {
      @include button-color($btn-disable-color, $btn-disable-bg, $btn-disable-border);
      cursor: not-allowed;

      @include theme-font-color($__checkbtn-button_disabled_font-color);
      @include theme-background-color($__checkbtn-button_disabled_background-color);
      @include theme-border-color($__checkbtn-button_disabled_border-color);

      .#{$checkbtn-prefix-cls}-icon {
        @include theme-border-right-color($__checkbtn-icon_disabled_selected_border-color);
      }
    }
  }
}

.#{$form-item-prefix-cls}-error {
  .#{$checkbox-prefix-cls} {
    @include checkbox-error();

    &-icon {
      color: $error-color;

      @include theme-font-color($__checkbox-form-item-icon_error_font-color);
    }

    &-checked {
      .#{$checkbox-prefix-cls}-inner {
        @include theme-background-color($__checkbox-form-item-inner_error_background-color);
      }
    }
  }
}