:host {
  width: 100%;
  height: 100%;
  width: 222px;
}
.task-rounds {
  // border-right: 1px solid #e5e5e5;
  border-radius: 6px 0 0 6px;
  .title {
    padding: 18px;
    border-radius: 6px 0 0 0;
    font-size: 14px;
    color: #7d8da6;
    background-color: #e2e8f0;
  }
  .content {
    padding: 12px;
    max-height: calc(100% - 44px);
    overflow-y: auto;
    .item {
      padding: 12px;
      border-radius: 6px;
      background-color: #f6f7fa;
      margin-bottom: 12px;
      cursor: pointer;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: var(--color);
      &:hover {
        background-color: #eff6ff;
      }
      &.active {
        background-color: #bfdbfe;
        // 三角箭头
        &::after {
          content: '';
          position: absolute;
          right: -8px;
          top: 50%;
          transform: translateY(-50%);
          width: 0;
          height: 0;
          border-top: 6px solid transparent;
          border-bottom: 6px solid transparent;
          border-left: 8px solid #bfdbfe;
        }
      }
    }
    .tag {
      border-radius: 4px;
      padding: 2px 4px;
      border: 1px solid var(--color);
      // background-color: var(--color);
      color: var(--color);
      font-size: 12px;
      min-width: 46px;
      text-align: center;
    }
  }
}
