@import './mixin.less';

@checkbox-prefix-cls: ~'@{icecream-prefix}-checkbox';

@checkbox-border-color: @icecream-color-grey-7;

.@{checkbox-prefix-cls} {
  .extendBase();
  display: inline-block;
  .setFontSize(@icecream-font-size-md);
  color: @icecream-bold-color;
  cursor: pointer;

  & + & {
    margin-left: @icecream-gap-lg;
  }

  &-input {
    position: relative;
    top: -0.09em;
    display: inline-block;
    white-space: nowrap;
    vertical-align: middle;
    outline: none;

    &-origin {
      position: absolute;
      top: 0;
      left: 0;
      margin: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      cursor: pointer;
      opacity: 0;
    }

    &-simulated {
      .normalUncheckedBox();
    }
  }

  &:hover &-input-simulated {
    .hoveredBox();
  }

  &-label {
    display: inline-block;
    padding-left: @icecream-gap-xs;
  }

  &-size-small {
    .setFontSize(@icecream-font-size-sm);
  }
}

.@{checkbox-prefix-cls}-checked {

  .@{checkbox-prefix-cls}-input-simulated {
    .checkedBox();

    &::after {
      .checkedIcon();
    }
  }
}

.@{checkbox-prefix-cls}-partial-checked {

  .@{checkbox-prefix-cls}-input-simulated {
    .checkedBox();

    &::after {
      .partialCheckedIcon();
    }
  }
}

.@{checkbox-prefix-cls}-disabled {
  cursor: not-allowed;

  .@{checkbox-prefix-cls}-input {
    &-origin {
      cursor: not-allowed;
    }

    &-simulated {
      .disabledBox();
    }
  }

  &.@{checkbox-prefix-cls}-checked,
  &.@{checkbox-prefix-cls}-partial-checked {
    .@{checkbox-prefix-cls}-input-simulated::after {
      .disabledIcon();
    }
  }
}

.setPadding(@line-height, @font-size) {
  @content-line-height: getIcecreamLineHeightByPx(@font-size);
  @padding-y: (@line-height - @content-line-height) / 2 - 1px;
  @padding-x: @icecream-gap-md - 1px;
  padding: @padding-y @padding-x;
}

.@{checkbox-prefix-cls}-bordered {
  border: 1px solid @checkbox-border-color;
  border-radius: @icecream-border-radius;

  &:hover, &.@{checkbox-prefix-cls}-checked {
    border-color: @icecream-primary-color;
  }

  &.@{checkbox-prefix-cls}-disabled {
    border-color: @checkbox-border-color !important;
  }

  &.@{checkbox-prefix-cls}-size {
    &-small {
      .setPadding(@icecream-form-input-height-sm, @icecream-font-size-sm);
    }

    &-default {
      .setPadding(@icecream-form-input-height-md, @icecream-font-size-md);
    }

    &-large {
      .setPadding(@icecream-form-input-height-lg, @icecream-font-size-md);
    }
  }
}