$icon-size: 17px;

.doc-title {
  @include flex(row, flex-start, flex-start);
  width: 100%;
  padding: 1px 0;

  .doc-name {
    @include flex(row, flex-start, flex-start);
    @include themeBrightness(100%, 90%);
    @include ellipsis();
    font-size: inherit;
    align-content: flex-start;
    flex-wrap: wrap;
    height: 100%;
    width: 100%;

    .menu-icon,
    .menu-icon-img {
      @include box($icon-size, $icon-size, $icon-size, $icon-size, $icon-size, $icon-size);
      margin-top: 4px;
      margin-right: 8px;
    }
    .menu-icon-img {
      border-radius: 2px;
    }

    .name-wrapper {
      min-height: 23px;
      line-height: 23px;
    }
  }
}

// 专题样式, 包括边框和文字样式
.subject-title {
  @include flex(row, flex-start, flex-start);
  @include themeShadow(2px 2px 8px 1px var(--el-color-primary-light-8), 2px 2px 10px 1px #131313);
  background: linear-gradient(135deg, var(--el-color-primary-light-7), var(--el-color-primary-light-8), var(--bl-html-color));
  min-height: 44px;
  max-width: 300px;
  width: calc(100% - 10px);
  padding: 4px 5px;
  margin: 5px 0 5px 0;
  border-radius: 7px;

  .doc-name {
    @include flex(row, flex-start, flex-start);
    @include themeBrightness(100%, 100%);
    color: var(--el-color-primary);
    align-content: flex-start;
    flex-wrap: wrap;
    width: 100%;

    .menu-icon,
    .menu-icon-img {
      @include box($icon-size, $icon-size, $icon-size, $icon-size, $icon-size, $icon-size);
      margin-right: 8px;
    }

    .menu-icon-img {
      border-radius: 2px;
    }

    .name-wrapper {
      max-width: calc(100% - 25px);
      min-width: calc(100% - 25px);
    }
  }
}

.sort-tag {
  font-size: 12px;
  color: #fff;
  padding: 0 2px;
  margin-top: 3px;
  border-radius: 4px;
  position: absolute;
  right: 3px;
  top: 2px;
  z-index: 10;
}

// 在左侧显示
.open-line,
.star-line,
.sync-line {
  position: absolute;
  width: 2px;
  height: 60%;
  top: 20%;
  border-radius: 10px;
}

.star-line {
  @include themeBg(rgb(237, 204, 11), rgba(228, 195, 5, 0.724));
}

.open-line {
  background: #79c20c71;
}

.sync-line {
  background: #e8122479;
}
