// GroupTagCore.less
.group-tag-core {
  width: 100%;
  border: 1px solid #f0f0f0;
  border-radius: 6px;
  overflow: hidden;

  // 编辑模式下的整体样式
  &.edit-mode {
    .search-wrapper {
      .ant-input-affix-wrapper {
        background-color: #f5f5f5;

        .ant-input {
          background-color: #f5f5f5;
          cursor: not-allowed;
        }
      }
    }
  }

  .search-wrapper {
    padding: 8px;
    border-bottom: 1px solid #f0f0f0;

    .ant-input-affix-wrapper {
      width: 100%;
    }
  }

  .content-wrapper {
    flex: 1;
    overflow: hidden;

    .loading-wrapper {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 200px;
      text-align: center;
    }

    .split-layout {
      display: flex;
      height: 100%;

      .groups-panel {
        width: 200px;
        border-right: 1px solid #f0f0f0;
        display: flex;
        flex-direction: column;

        .panel-header {
          padding: 8px 12px;
          background-color: #fafafa;
          border-bottom: 1px solid #f0f0f0;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-weight: 500;
          font-size: 14px;
        }

        .groups-list {
          overflow: auto;
          height: 40vh;
          .group-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 12px;
            cursor: pointer;
            transition: background-color 0.2s;
            border-bottom: 1px solid #f5f5f5;

            &:hover {
              background-color: #f5f5f5;
            }

            &.active {
              background-color: #e6f7ff;
              border-color: #91d5ff;
            }

            &.editing {
              background-color: #fff7e6;
              cursor: default;

              &:hover {
                background-color: #fff7e6;
              }
            }

            &.disabled {
              cursor: not-allowed;
              opacity: 0.6;

              &:hover {
                background-color: inherit;
              }

              &.active:hover {
                background-color: #e6f7ff;
              }
            }

            .group-content {
              flex: 1;
              display: flex;
              justify-content: space-between;
              align-items: center;

              .group-name {
                font-size: 13px;
                color: #262626;
              }

              .edit-input-wrapper {
                display: flex;
                align-items: center;
                gap: 4px;
                width: 100%;

                .ant-input {
                  flex: 1;
                  font-size: 12px;
                }

                .edit-actions {
                  display: flex;
                  gap: 2px;

                  .ant-btn {
                    padding: 0;
                    width: 20px;
                    height: 20px;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    .anticon {
                      font-size: 10px;
                    }
                  }
                }
              }
            }

            .ant-checkbox-wrapper {
              margin-left: 8px;
            }
          }
        }
      }

      .tags-panel {
        flex: 1;
        display: flex;
        flex-direction: column;

        .panel-header {
          padding: 8px 12px;
          background-color: #fafafa;
          border-bottom: 1px solid #f0f0f0;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-weight: 500;
          font-size: 14px;
        }

        .tags-list {
          overflow: auto;
          height: 40vh;
          padding: 4px 0;

          .loading-wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 60px;
          }
          .infinite-scroll-container {
            height: 50vh !important;
            overflow-y: auto;
          }
          .tag-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 6px 12px;
            transition: background-color 0.2s;

            &:hover {
              background-color: #f5f5f5;
            }

            &.editing {
              background-color: #fff7e6;

              &:hover {
                background-color: #fff7e6;
              }
            }

            &.disabled {
              opacity: 0.6;

              &:hover {
                background-color: inherit;
              }
            }

            .ant-checkbox-wrapper {
              flex: 1;

              span:last-child {
                color: #595959;
                font-size: 13px;
              }
            }

            .tag-name-only {
              flex: 1;
              color: #8c8c8c;
              font-size: 13px;

              .anticon {
                color: #bfbfbf;
              }
            }

            .tag-actions {
              display: flex;
              gap: 2px;
              opacity: 0;
              transition: opacity 0.2s;

              .ant-btn {
                padding: 0;
                width: 20px;
                height: 20px;
                display: flex;
                align-items: center;
                justify-content: center;

                .anticon {
                  font-size: 10px;
                }
              }
            }

            &:hover .tag-actions {
              opacity: 1;
            }

            .edit-input-wrapper {
              display: flex;
              align-items: center;
              gap: 4px;
              width: 100%;

              .ant-input {
                flex: 1;
                font-size: 12px;
              }

              .edit-actions {
                display: flex;
                gap: 2px;

                .ant-btn {
                  padding: 0;
                  width: 20px;
                  height: 20px;
                  display: flex;
                  align-items: center;
                  justify-content: center;

                  .anticon {
                    font-size: 10px;
                  }
                }
              }
            }
          }

          .ant-empty {
            padding: 40px 20px;

            .ant-empty-description {
              color: #8c8c8c;
              font-size: 12px;
            }
          }
        }
      }
    }
  }
}
