.yc-checkbox {
  position: relative;
  cursor: pointer;
  padding-left: 5px;
  font-size: 14px;
  line-height: unset;
  display: inline-flex;
  align-items: center;
  gap: 8px;

  .yc-checkbox-target {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    visibility: hidden;
  }
  .yc-checkbox-icon,
  .yc-checkbox-label {
    flex-shrink: 0;
  }
  .yc-checkbox-icon {
    position: relative;
    width: 14px;
    height: 14px;
    border: 2px solid var(--color-border-2);
    border-radius: var(--border-radius-small);
    color: var(--color-white);
    display: flex;
    justify-content: center;
    align-items: center;
    &::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      display: block;
      width: 6px;
      height: 2px;
      background: var(--color-white);
      border-radius: 1px;
      transform: translateX(-50%) translateY(-50%) scale(0);
    }
  }
  .yc-checkbox-label {
    user-select: none;
    flex: 1;
    color: var(--color-text-1);
  }
}

// icon显影
.yc-checkbox-checked {
  .yc-checkbox-icon {
    .yc-icon {
      visibility: visible;
    }
  }
}
.yc-checkbox-unchecked,
.yc-checkbox-indeterminate {
  .yc-checkbox-icon {
    .yc-icon {
      visibility: hidden;
    }
  }
}

// 全选和半选
// transition: border-color 0.1s cubic-bezier(0, 0, 1, 1);
.yc-checkbox-unchecked {
  &:not(.yc-checkbox-disabled):hover .yc-icon-button {
    &::before {
      background-color: var(--color-fill-2);
    }
    .yc-checkbox-icon {
      border-color: var(--color-border-3);
    }
  }
}
.yc-checkbox-checked,
.yc-checkbox-indeterminate {
  .yc-checkbox-icon {
    border-color: transparent;
    background-color: rgb(var(--primary-6));
  }

  &.yc-checkbox-disabled {
    .yc-icon-button {
      .yc-checkbox-icon {
        border-color: transparent;
        background-color: rgb(var(--primary-3));
      }
    }
  }
}
// 半选
.yc-checkbox-indeterminate {
  .yc-checkbox-icon {
    transition: transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1);
    &::after {
      transform: translateX(-50%) translateY(-50%) scale(1);
    }
  }
}
// disabled
.yc-checkbox-disabled {
  cursor: not-allowed;
  .yc-icon-button {
    cursor: not-allowed;
    .yc-checkbox-icon {
      border-color: var(--color-border-2);
      background-color: var(--color-fill-2);
    }
  }

  .yc-checkbox-label {
    color: var(--color-text-4);
  }
}
