@import "../variables.scss";
@import "./variables.scss";
@import "~@alifd/next/lib/core/index-noreset";
@import "~@alifd/next/lib/checkbox/scss/variable";

#{$checkbox-prefix}-wrapper {

  &.#{$css-prefix}xl {
    @include checkbox-sizing($b-design-checkbox-xl-size, $b-design-checkbox-xl-icon-size, $b-design-checkbox-xl-font-size);
  }

  &.#{$css-prefix}large {
    @include checkbox-sizing($b-design-checkbox-l-size, $b-design-checkbox-l-icon-size, $b-design-checkbox-l-font-size);
  }

  &.#{$css-prefix}medium {
    @include checkbox-sizing($b-design-checkbox-m-size, $b-design-checkbox-m-icon-size, $b-design-checkbox-m-font-size);
  }

  &.#{$css-prefix}small {
    @include checkbox-sizing($b-design-checkbox-s-size, $b-design-checkbox-s-icon-size, $b-design-checkbox-s-font-size);

    .#{$css-prefix}checkbox-label {
      margin-left: $b-design-checkbox-s-label-margin;
      margin-right: $b-design-checkbox-s-label-margin;
    }
  }

  &.checked,
  &.checked.focused {
    >#{$checkbox-prefix} {
      >#{$checkbox-prefix}-inner {
        >.#{$css-prefix}icon {
          font-weight: bold;
        }
      }
    }
  }

  &.disabled {
    .#{$css-prefix}checkbox-inner {
      background-color: $b-design-checkbox-disabled-bg;
    }
  }
}