@import '../styles/themes/themes.less';

.@{bk-prefix}-checkbox-group {
  display: inline-flex;
  letter-spacing: normal;
}

.@{bk-prefix}-checkbox {
  display: inline-flex;
  justify-self: center;
  align-items: center;
  font-size: 14px;
  letter-spacing: normal;
  color: #63656e;
  cursor: pointer;
  user-select: none;

  & ~ .@{bk-prefix}-checkbox {
    margin-left: 24px;
  }

  &.is-checked {
    &.is-outline {
      .@{bk-prefix}-checkbox-input {
        background: #fff;

        &::after {
          border: 2px solid @primary-color;
          border-top: 0;
          border-left: 0;
        }
      }
    }

    .@{bk-prefix}-checkbox-input {
      background: @primary-color;
      border-color: @primary-color;
      transition: all .1s;

      &.small {
        &::after {
          width: 3px;
          height: 6px;
        }
      }

      &::after {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 4px;
        height: 8px;
        border: 2px solid #fff;
        border-top: 0;
        border-left: 0;
        content: '';
        transform: translate(-50%, -60%) scaleY(1) rotate(45deg);
        transform-origin: center;
      }
    }
  }

  &.is-indeterminated {
    .@{bk-prefix}-checkbox-input {
      background: @primary-color;
      border-color: @primary-color;
      transition: all .1s;

      &.small {
        &::after {
          width: 6px;
          height: 2px;
        }
      }

      &::after {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 8px;
        height: 2px;
        background: #fff;
        border: none;
        border-radius: 2px;
        content: '';
        transform: translate(-50%, -50%);
      }
    }
  }

  &.is-disabled {
    color: #c4c6cc;
    cursor: not-allowed;

    .@{bk-prefix}-checkbox-input {
      background: #fafbfd;
      border-color: @disable-color;

      &::after {
        background: @disable-color;
      }
    }

    &.is-checked {
      .@{bk-prefix}-checkbox-input {
        background: @checkbox-disabled-checked-bg;
        border-color: @checkbox-disabled-checked-bg;

        &::after {
          background: @checkbox-disabled-checked-bg;
        }
      }
    }
  }

  &.is-prechecking {
    position: relative;
    .@{bk-prefix}-checkbox-input {
      visibility: hidden;
    }
  }
}

.@{bk-prefix}-checkbox-input {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  border: 1px solid #979ba5;
  border-radius: 2px;

  &.small {
    width: 14px;
    height: 14px;
  }
}

.@{bk-prefix}-checkbox-original {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 0;
  height: 0;
}

.@{bk-prefix}-checkbox-label {
  display: inline-block;
  margin-left: 6px;
  vertical-align: middle;
}

.@{bk-prefix}-checkbox-checking {
  position: absolute;
  font-size: 16px;
  color: #3a84ff;
  animation: loading 1s linear infinite;
}
