export const comment = `
.comment .comment-container {
    img.ui.avatar {
      border-radius: 9999px;
    }
    /* 去除评论标题左侧指向头像的小箭头 */
    .comment-header,
    &:target .comment-header {
      &:before,
      &:after {
        display: none;
      }
    }
    /* 评论焦点样式 */
    &:target {
      .comment-container {
        border-color: var(--github-borderColor-accent-emphasis) !important;
        box-shadow: 0 0 0 1px var(--color-primary) !important;
      }
    }
    .comment-header {
      padding: 4px 4px 4px 16px;
      min-height: 38px;
      .comment-header-left {
        /* bot 标签 */
        .ui.basic.label {
          height: 20px;
padding: 0 6px !important;
margin-left: 4px;
        }
        a:has(relative-time) {
          text-decoration: underline;
        }
        /* 已编辑按钮 */
        .content-history-menu {
          color: var(--color-text-light-1) !important;
          .menu .item {
            font-size: 12px;
            .ui.avatar {
              height: 20px;
              width: 20px;
            }
          }
        }
      }
    }
    .comment-header-right {
      > .item,
      > .label {
        color: var(--color-text-light-1);
      }
      > .ui.label {
        background-color: initial;
        font-size: 12px;
        height: 20px;
        padding: 0 6px;
      }
      .context-dropdown {
        height: 28px;
        padding: 0 6px;
        border-radius: var(--border-radius);
        &:hover {
          background-color: var(--github-control-transparent-bgColor-hover);
        }
        &:active {
          background-color: var(--github-control-transparent-bgColor-active);
        }
        a.context-menu {
          display: flex;
          align-items: center;
          &:hover {
            color: inherit;
          }
        }
        /* 评论菜单的删除按钮 */
        .menu .item.delete-comment {
          color: var(--color-red);
          &:hover {
            background-color: var(--color-red-badge-bg) !important;
            color: var(--color-red-light);
          }
          &:active {
            background-color: var(--github-control-danger-bgColor-active) !important;
          }
        }
      }
    }
    /* 表情菜单按钮头部+底部 */
    .ui.dropdown.action.select-reaction > a {
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--color-button);
      border-radius: 9999px;
      border: 1px solid var(--color-light-border);
      color: var(--color-text-light-1);
      padding: 0px 8px !important;
      height: 28px;
      width: 28px;
    }
    /* 底部表情栏 */
    .bottom-reactions {
      .ui.ui.ui.label {
        background-color: unset !important;
        border-radius: 9999px;
        border-color: var(--color-light-border);
        &:hover {
          background-color: var(--color-reaction-hoverBg) !important;
          border-color: var(--color-light-border);
        }
        .reaction {
          font-size: 12px;
        }
        .reaction-count {
          color: var(--color-text-light);
          font-weight: 500;
          margin-left: 0;
        }
      }
      /* 显示表情菜单按钮 */
      .select-reaction {
        padding: 0;
        /* 两个表情按钮看着怪怪的, 很难受 */
        /* visibility: visible; */
      }
    }
  }
`;

export const commentForm = `
.repository .comment.form .content .segment {
    &::before,
    &::after {
      display: none;
    }
  }
`;

export const stylesheet = [comment, commentForm].join("\n\n");