@import './var.less';

@checkbox-prefix-cls:  ~"@{css-prefix}-checkbox";

.@{checkbox-prefix-cls} {
  display: inline-block;
  height: @checkbox-size;
  width: @checkbox-size;
  font-size: @checkbox-size;
  border: 1px solid @checkbox-border-color;
  vertical-align: middle;
  position: relative;

  &::after {
    content: ' ';
    display: block;
    background: @primary-color;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    transition: @transition-quick;
  }

  &-input {
    display: none;
  }

  &-checked {
    border-color: @primary-color;

    &::after {
      transform: translate(-50%, -50%);
      width: calc(@checkbox-size - 8px);
      height: calc(@checkbox-size - 8px);
    }
  }

  &-text {
    margin: 0 10px;
    font-size: @font-size-default;
  }
}

.@{checkbox-prefix-cls}-wrapper {
  cursor: pointer;
}

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

  .@{checkbox-prefix-cls}-checked {
    border-color: @color-disabled;

    &::after {
      background: @color-disabled;
      transform: translate(-50%, -50%);
      width: calc(@checkbox-size - 8px);
      height: calc(@checkbox-size - 8px);
    }
  }
}