@blue-item-border-color: #d4e2ee; // 蓝色边框颜色
@dark-item-border-color: #435292; // 深色边框颜色
@light-background-color: #f4faff; // 浅色背景颜色
@light-background-color-unchecked: #f1f1f1; // 浅色背景颜色（未选中）
@dark-background-color: #2a3253; // 深色背景颜色
@dark-background-color-unchecked: #2a3253; // 深色背景颜色（未选中）
@light-text-color: #333; // 浅色文本颜色
@dark-text-color: #fff; // 深色文本颜色

.zhny-custom-column {
  .zhny-drawer-content {
    padding: 10px 0px 70px !important;
  }
  .zhny-custom-column-outer-box {
    margin: 0 10px;
  }
}

.zhny-custom-column-list-group {
  &:not(:last-child) {
    margin-bottom: 20px;
  }
}

.zhny-custom-column-list-title {
  font-weight: bold;
  color: @light-text-color;
  line-height: 30px;
  margin-left: 10px;
  .skin-dark & {
    color: @dark-text-color;
  }
  .title-desc {
    color: #999;
    font-size: 12px;
    .skin-dark & {
      color: #c7c7c7;
    }
  }
}

.zhny-columns-setting {
  border-radius: 4px;
  border: 1px solid @blue-item-border-color;
  .skin-dark & {
    border-color: @dark-item-border-color;
  }
  &:not(:last-child) {
    margin-bottom: 2px;
  }
  &-body {
    display: flex;
    align-items: center;
    height: 36px;
    padding: 0 12px;
    border-radius: 4px;
    background-color: @light-background-color;
    &-widthchildren {
      border-radius: 4px 4px 0 0;
    }
    .skin-dark & {
      background-color: @dark-background-color;
    }
    &-title {
      user-select: none;
      margin: 0 12px;
      flex: 1;
      color: @light-text-color;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      .skin-dark & {
        color: @dark-text-color;
      }
    }
  }
  &-children {
    border-top: 1px solid @blue-item-border-color;
    padding: 10px;
    .skin-dark & {
      border-top-color: @dark-item-border-color;
    }
  }
}

.zhny-columns-setting {
  &-unchecked {
    border-color: @light-border-color;
    .skin-dark & {
      border-color: @dark-background-color-unchecked;
    }
    .zhny-columns-setting-body {
      background-color: @light-background-color-unchecked;
      .skin-dark & {
        background-color: @dark-background-color-unchecked;
      }
    }
    .zhny-columns-setting-children {
      border-top-color: @light-background-color-unchecked;
      .skin-dark & {
        border-top-color: @dark-background-color-unchecked;
      }
    }
  }
  .zhny-columns-setting-body {
    .ant-space-item {
      display: flex;
      align-items: center;
    }
    .checkbox-wrapper {
      display: flex;
      align-items: center;
    }
  }
}

.zhny-custom-column-list-empty {
  border-radius: 4px;
  border: 1px dashed #d3d3d3;
  .skin-dark & {
    border-color: #435292;
  }
  .ant-empty {
    margin: 10px 0;
  }
  .ant-empty-img-simple-ellipse {
    .skin-dark & {
      fill: #151935;
    }
  }
  .ant-empty-img-simple-g {
    .skin-dark & {
      stroke: #5e76d7;
    }
  }
  .ant-empty-img-simple-path {
    .skin-dark & {
      fill: #2a3253;
    }
  }
}

.zhny-columns-setting-helper {
  box-shadow: 0px 0px 8px 0px rgba(205, 224, 255, 0.95);
  /** 修复抽屉中层级和透明度问题 */
  &.zhny-columns-setting {
    z-index: 1001;
    opacity: 1;
  }
}

.zhny-custom-column-trigger {
  .ant-btn.zhny-icon-button.ant-btn-text {
    color: #4284e5 !important;
    .skin-dark & {
      color: #95adff !important;
    }
    .zhnycomp {
      color: #4284e5 !important;
      .skin-dark & {
        color: #95adff !important;
      }
    }
    &:focus {
      color: #4284e5 !important;
    }
  }
  .zhnycomp-setting.zhnycomp {
    position: relative;
    font-size: 12px;
    + span {
      font-size: 12px;
    }
  }
}