@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;
          transform: scale(0.8);
        }
      }
    }
  }

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