.bewly-design {
  // #region new comments components

  // #region theme color adaption part
  // Increase the priority of the style inside by writing a non-existent selector in `:not()`
  :not(foobar) {
    .like-icon:hover,
    .like-icon.liked,
    .dislike-icon:hover,
    .dislike-icon.disliked,
    .sub-like-icon:hover,
    .sub-like-icon.liked,
    .sub-dislike-icon:hover,
    .sub-dislike-icon.disliked {
      color: var(--bew-theme-color) !important;
    }

    .reply-operation .operation-icon:hover,
    .bb-comment .comment-list .list-item .text .vote-link,
    .comment-bilibili-fold .comment-list .list-item .text .vote-link,
    .bb-comment .comment-list .list-item .text-con .vote-link,
    .comment-bilibili-fold .comment-list .list-item .text-con .vote-link,
    .bb-comment .comment-list .list-item .text .lottery-link,
    .comment-bilibili-fold .comment-list .list-item .text .lottery-link,
    .bb-comment .comment-list .list-item .text-con .lottery-link,
    .comment-bilibili-fold .comment-list .list-item .text-con .lottery-link,
    .bb-comment .comment-list .list-item .text .comment-jump-url,
    .comment-bilibili-fold .comment-list .list-item .text .comment-jump-url,
    .bb-comment .comment-list .list-item .text-con .comment-jump-url,
    .comment-bilibili-fold .comment-list .list-item .text-con .comment-jump-url {
      color: var(--bew-theme-color);
    }

    .bili-comment.browser-pc * a:hover {
      color: var(--bew-theme-color-80);
    }

    // 登录后发表评论
    .reply-box.disabled .box-normal .reply-box-warp .disable-mask .no-login-mask .login-btn:hover {
      background-color: var(--bew-theme-color-80);
    }

    // 登录后查看评论
    .reply-list .login-prompt:hover {
      background-color: var(--bew-theme-color-40);
    }

    .reply-content-container .reply-content .icon,
    .bb-comment .comment-list .list-item .text .jump-img,
    .comment-bilibili-fold .comment-list .list-item .text .jump-img,
    .bb-comment .comment-list .list-item .text-con .jump-img,
    .comment-bilibili-fold .comment-list .list-item .text-con .jump-img {
      filter: var(--bew-filter-icon-glow);
    }
  }
  // #endregion

  // #region dark mode adaption part
  &.dark {
    // 評論人用戶名
    .reply-item .root-reply-container .content-warp .user-info .user-name,
    .sub-reply-item .sub-user-info .sub-user-name {
      // --520c991b: var(--bew-theme-color);
      color: var(--bew-text-1) !important;
    }

    // UP主觉得很赞
    .reply-item .root-reply-container .content-warp .root-reply .reply-tag-list .reply-tag-item {
      color: var(--bew-text-2) !important;
      background-color: var(--bew-fill-1) !important;
    }

    .sub-reply-item.show-reply,
    .reply-item .root-reply-container.show-reply {
      background-color: var(--bew-fill-1);
      animation: jumpReply 5s forwards;
    }

    @keyframes jumpReply {
      0% {
        background-color: var(--bew-theme-color-10);
      }
      100% {
        background-color: var(--bew-fill-1);
      }
    }

    .bili-dyn-forward-publishing__editor {
      background-color: var(--bew-content-solid);
    }

    // Like & dislike icon
    .like-icon,
    .dislike-icon,
    .sub-like-icon,
    .sub-dislike-icon {
      color: var(--bew-text-3) !important;
    }
    .reply-box .box-normal .reply-box-warp,
    .reply-box .box-expand .reply-box-emoji .emoji-btn,
    .reply-box .box-expand .at-btn,
    .reply-box .box-expand .image-btn {
      border-color: var(--bew-border-color);
    }

    .reply-box .box-normal .reply-box-warp.focus-within,
    .reply-box .box-normal .reply-box-warp:hover {
      border-color: var(--bew-theme-color);
    }

    .reply-box .box-expand .svg-icon svg path {
      filter: invert(1) hue-rotate(180deg);
    }
  }
  // #endregion

  // #endregion

  // #region Old comments components
  .bb-comment .comment-send .comment-submit,
  .comment-bilibili-fold .comment-send .comment-submit,
  .bb-comment .comment-send-lite .comment-submit,
  .comment-bilibili-fold .comment-send-lite .comment-submit,
  .bb-comment .stick.assist,
  .comment-bilibili-fold .stick.assist,
  .bb-comment .stick.up,
  .comment-bilibili-fold .stick.up {
    background-color: var(--bew-theme-color);
  }

  .bb-comment .comment-send .comment-submit:hover,
  .comment-bilibili-fold .comment-send .comment-submit:hover,
  .bb-comment .comment-send-lite .comment-submit:hover,
  .comment-bilibili-fold .comment-send-lite .comment-submit:hover {
    background-color: var(--bew-theme-color-80);
  }

  .bb-comment .comment-header .tabs-order li:hover,
  .comment-bilibili-fold .comment-header .tabs-order li:hover,
  .bb-comment .comment-list .list-item .user .name:hover,
  .comment-bilibili-fold .comment-list .list-item .user .name:hover,
  .bb-comment a,
  .comment-bilibili-fold a,
  .bili-dyn-forward-item__action,
  .bb-comment .comment-list .list-item .info .btn-hover:hover,
  .comment-bilibili-fold .comment-list .list-item .info .btn-hover:hover,
  .bb-comment .comment-list .list-item .reply-box .view-more .btn-more:hover,
  .comment-bilibili-fold .comment-list .list-item .reply-box .view-more .btn-more:hover,
  .bb-comment .stick,
  .comment-bilibili-fold .stick,
  .bb-comment .comment-header .tabs-order li.on,
  .comment-bilibili-fold .comment-header .tabs-order li.on {
    color: var(--bew-theme-color);
  }

  .bb-comment .stick.assist,
  .comment-bilibili-fold .stick.assist,
  .bb-comment .stick.up,
  .comment-bilibili-fold .stick.up {
    color: white !important;
  }

  .bb-comment .comment-list .list-item .info span.liked i,
  .comment-bilibili-fold .comment-list .list-item .info span.liked i,
  .bb-comment .comment-list .list-item .info span.hated i,
  .comment-bilibili-fold .comment-list .list-item .info span.hated i,
  .bb-comment .comment-list .list-item .info span:hover i,
  .comment-bilibili-fold .comment-list .list-item .info span:hover i,
  .bb-comment .operation .spot:hover,
  .comment-bilibili-fold .operation .spot:hover {
    filter: var(--bew-filter-icon-glow);
  }

  .bb-comment .comment-header .tabs-order li.on:after,
  .comment-bilibili-fold .comment-header .tabs-order li.on:after {
    display: none;
  }

  .bili-dyn-forward-publishing__action__btn,
  .textarea-container .comm-tool .comm-submit {
    background-color: var(--bew-theme-color) !important;
  }

  .textarea-container .comm-tool .comm-submit:hover {
    background-color: var(--bew-theme-color-80) !important;
  }

  .textarea-container textarea:hover,
  .textarea-container textarea:focus,
  .bb-comment .comment-send .textarea-container:hover textarea,
  .comment-bilibili-fold .comment-send .textarea-container:hover textarea,
  .bb-comment .comment-send-lite .textarea-container:hover textarea,
  .comment-bilibili-fold .comment-send-lite .textarea-container:hover textarea,
  .bb-comment .comment-send .textarea-container.focus textarea,
  .comment-bilibili-fold .comment-send .textarea-container.focus textarea,
  .bb-comment .comment-send-lite .textarea-container.focus textarea,
  .comment-bilibili-fold .comment-send-lite .textarea-container.focus textarea,
  .bili-dyn-forward-publishing__editor:not(.disabled):focus,
  .bili-dyn-forward-publishing__editor:not(.disabled):hover,
  .bb-comment .comment-send .comment-submit,
  .comment-bilibili-fold .comment-send .comment-submit,
  .bb-comment .comment-send-lite .comment-submit,
  .comment-bilibili-fold .comment-send-lite .comment-submit,
  .bb-comment .comment-header .tabs-order li.on,
  .comment-bilibili-fold .comment-header .tabs-order li.on,
  .bb-comment .stick,
  .comment-bilibili-fold .stick {
    border-color: var(--bew-theme-color);
  }

  .textarea-container textarea:hover,
  .textarea-container textarea:focus {
    border-color: var(--bew-theme-color) !important;
  }

  .bb-comment .comment-send .comment-submit:hover,
  .comment-bilibili-fold .comment-send .comment-submit:hover,
  .bb-comment .comment-send-lite .comment-submit:hover,
  .comment-bilibili-fold .comment-send-lite .comment-submit:hover {
    border-color: var(--bew-theme-color-80);
  }

  &.dark {
    .bb-comment,
    .comment-bilibili-fold,
    .bb-comment .comment-send.comment-send-lite,
    .comment-bilibili-fold .comment-send.comment-send-lite,
    .bb-comment .comment-send-lite.comment-send-lite,
    .comment-bilibili-fold .comment-send-lite.comment-send-lite,
    .comment-wrapper .comment-m {
      // background-color: var(--bew-content-solid);
      background-color: var(--bew-bg);
    }

    .bili-dyn-item .bb-comment {
      background-color: unset;
    }

    .bb-comment .comment-send .textarea-container:hover textarea,
    .comment-bilibili-fold .comment-send .textarea-container:hover textarea,
    .bb-comment .comment-send-lite .textarea-container:hover textarea,
    .comment-bilibili-fold .comment-send-lite .textarea-container:hover textarea,
    .bb-comment .comment-send .textarea-container.focus textarea,
    .comment-bilibili-fold .comment-send .textarea-container.focus textarea,
    .bb-comment .comment-send-lite .textarea-container.focus textarea,
    .comment-bilibili-fold .comment-send-lite .textarea-container.focus textarea,
    .bili-dyn-forward-publishing__editor:not(.disabled):focus,
    .bili-dyn-forward-publishing__editor:not(.disabled):hover {
      background-color: var(--bew-content-solid);
    }

    .forw-area,
    .bili-rich-textarea__inner {
      background-color: transparent;
    }

    .textarea-container .comm-tool .comm-emoji {
      background-color: var(--bew-fill-1);
    }

    .bb-comment .comment-list .list-item .info .btn-hover:hover,
    .comment-bilibili-fold .comment-list .list-item .info .btn-hover:hover,
    .bb-comment .comment-list .list-item .reply-box .view-more .btn-more:hover,
    .comment-bilibili-fold .comment-list .list-item .reply-box .view-more .btn-more:hover {
      background-color: var(--bew-fill-2);
    }

    // .bb-comment .comment-list .list-item .user .name,
    .comment-bilibili-fold .comment-list .list-item .user .name,
    .bb-comment .comment-header .tabs-order li,
    .comment-bilibili-fold .comment-header .tabs-order li,
    .bili-dyn-forward-publishing__editor .bili-rich-textarea__inner,
    .comment-wrapper .comment-m .b-head {
      color: var(--bew-text-1);
    }

    .bili-dyn-forward-item__uname,
    .bb-comment .comment-list .list-item .user .name {
      color: var(--bew-text-1) !important;
    }

    .bb-comment .comment-list .list-item .reply-box .view-more,
    .comment-bilibili-fold .comment-list .list-item .reply-box .view-more {
      color: var(--bew-text-2);
    }

    .bili-dyn-interaction__item__desc .bili-rich-text-module {
      color: var(--bew-text-3);
    }

    .bb-comment .comment-header,
    .comment-bilibili-fold .comment-header,
    .bb-comment .comment-list .list-item .con,
    .comment-bilibili-fold .comment-list .list-item .con,
    .bb-comment .comment-send .comment-emoji,
    .comment-bilibili-fold .comment-send .comment-emoji,
    .bb-comment .comment-send-lite .comment-emoji,
    .comment-bilibili-fold .comment-send-lite .comment-emoji,
    .bb-comment .bottom-page.center,
    .bili-dyn-forward__item,
    .bili-dyn-forward__more,
    .forw-area .forw-more,
    .textarea-container .comm-tool .comm-emoji {
      border-color: var(--bew-border-color);
    }

    .bb-comment .comment-send .comment-emoji,
    .comment-bilibili-fold .comment-send .comment-emoji,
    .bb-comment .comment-send-lite .comment-emoji,
    .comment-bilibili-fold .comment-send-lite .comment-emoji {
      box-shadow: unset;
    }

    .bb-comment .comment-send .textarea-container .ipt-txt,
    .comment-bilibili-fold .comment-send .textarea-container .ipt-txt,
    .bb-comment .comment-send-lite .textarea-container .ipt-txt,
    .comment-bilibili-fold .comment-send-lite .textarea-container .ipt-txt,
    .textarea-container textarea {
      background-color: var(--bew-fill-1);
      border-color: var(--bew-border-color);
      color: var(--bew-text-1);
    }

    // UP主觉得很赞
    .bb-comment .comment-list .list-item .info .reply-tags span,
    .comment-bilibili-fold .comment-list .list-item .info .reply-tags span {
      background-color: var(--bew-fill-1) !important;
      color: var(--bew-text-2) !important;
    }

    .bb-comment .reply-notice .notice-item,
    .comment-bilibili-fold .reply-notice .notice-item {
      background-color: var(--Ye1);
      border-color: var(--Ye1);
      color: var(--Or7);
    }

    .bili-rich-textarea::-webkit-scrollbar-thumb {
      background-color: rgba(120, 120, 140, 0.44);
    }
  }
  // #endregion
}
