@import './dark-definitions';
@import 'common';

#{contains('mediainfo_media_toolbar')} {
  #{contains('mediainfo_btn_rating')} {
    @include color('a');
    @include border-color('4');
  }
  #{contains('mediainfo_btn_follow')} {
    &#{contains('mediainfo_follow_active')}#ogv-weslie-media-info-follow {
      @include background-color('4');
      @include color('a');
    }
  }
  #{contains('mediainfo_follow_options_list')} {
    @include background-color('3');
    @include border-color();
    li {
      @include color('e');
      &#{contains('mediainfo_disabled')} {
        @include color('6');
      }
      &:hover {
        @include background-color('5');
      }
    }
  }
}
#{contains('upinfo_up_info')} {
  #{contains('upinfo_btn_follow_up')} {
    @include theme-color();
  }
}
#{contains('seasonlist_ss_badge')} {
  &#{contains('seasonlist_blue')} {
    @include theme-background-color();
  }
}
#{contains('navTools_wrap')} {
  #{contains('navTools_item')} {
    @include background-color('3');
    @include border-color('4');
    @include color('a');
    path {
      @include fill('a');
    }
    &:hover {
      @include theme-background-color();
      @include border-color();
      @include foreground-color();
      path {
        @include foreground-fill();
      }
    }
  }
}
#{contains('toolbar_watch_more')} {
  @include background-color('3');
  @include border-color('4');
  @include no-shadow();
  #{contains('toolbar_title')} {
    @include color('e');
  }
}
#{contains('toolbar_mobile_more')} {
  @include background-color('3');
  @include border-color('4');
  @include no-shadow();
  #{contains('toolbar_video_title')} {
    @include color('e');
  }
  #{contains('toolbar_mobile_tip')} {
    @include color('a');
    #{contains('toolbar_mobile_link')} {
      @include theme-color();
    }
  }
  // 二维码需要加个边框才能识别
  canvas {
    padding: 4px;
    background-color: #fff;
  }
}
#{contains('toolbar_share_more')} {
  @include background-color('3');
  @include border-color('4');
  @include no-shadow();
  #{contains('toolbar_share_desc')} {
    @include color('e');
  }
  #{contains('toolbar_share_btn')} {
    &:hover {
      #{contains('toolbar_share_desc')} {
        @include theme-color();
      }
    }
    &:not(#share_tieba) {
      svg {
        circle {
          @include fill('e');
          // 这一排图标只有贴吧是做了减去顶层的... 其他的只能填个和背景相同的颜色假装是挖空的效果
          ~ path {
            @include fill('3');
          }
        }
      }
      &:hover {
        circle {
          @include theme-fill();
        }
      }
    }
  }
  #share_tieba {
    path {
      @include fill('e');
    }
    &:hover path {
      @include theme-fill();
    }
  }
}
#{contains('dialogcoin_coin_operated')} {
  @include background-color('3');
  #{contains('dialogcoin_icon_close')} {
    path {
      @include fill('a');
    }
  }
  #{contains('dialogcoin_coin_title')} {
    @include color('e');
    span {
      @include theme-color();
    }
  }
  #{contains('dialogcoin_like_checkbox')} {
    @include color('e');
    input[type='checkbox']:checked + i {
      @include to-theme('blue');
    }
  }
  #{contains('dialogcoin_coin_btn')} {
    @include theme-background-color();
    @include border-color();
    @include foreground-color();
    &:hover {
      @include theme-background-color('90');
    }
  }
  #{contains('dialogcoin_tips')} {
    @include color('a');
  }
}

.action-list-container {
  @include background-color('4');
  .action-list-header {
    &:hover {
      @include background-color();
    }
    .list-title {
      @include color('e');
    }
    .list-count {
      @include color('a');
    }
    .list-tool-btn {
      &-icon {
        @include color('a');
      }
      &:hover .list-tool-btn-icon {
        @include theme-color();
      }
    }
    .list-expand-btn {
      &-icon {
        @include color('e');
      }
    }
  }
  .list-display-name {
    @include color('a');
    &:hover {
      @include theme-color();
    }
  }
  .split-line {
    @include background-color('5');
  }
  .actionlist-item-inner {
    .main {
      .cover {
        @include background-color('3');
        .b-img {
          @include background-color();
        }
      }
      .info {
        .views {
          @include color('a');
        }
      }
      .del-btn {
        @include color('a');
        &:hover {
          @include theme-color();
        }
      }
    }
    &.siglep-active {
      .title {
        .playing-gif {
          @include to-theme('blue');
        }
      }
    }
  }
}
.recommend-list-container .rec-footer {
  @include background-color('3');
  @include color('e');
}
.recommend-video-card {
  .info {
    .upname {
      @include color('a');
      &:hover {
        @include theme-color();
      }
    }
    .playinfo {
      @include color('a');
    }
  }
}
.video-tag-container {
  .tag-panel {
    @include background-color();
    .tag-link {
      @include background-color('3');
      @include color('e');
    }
    .show-more-btn {
      @include background-color('3');
      @include color('e');
      &:hover {
        @include theme-color();
      }
    }
  }
}
.detail-channel-popup {
  .channel-info {
    .channel-desc {
      @include color('a');
    }
  }
  .channel-entry-btn {
    @include theme-color();
    &:hover {
      @include foreground-color();
    }
  }
  .toggle-sub-btn {
    &.no-sub:hover {
      @include border-color();
      @include theme-background-color();
    }
  }
}
.playlist-comment {
  .comment-container {
    @include background-color();
  }
}
.video-info-container {
  .video-title {
    &:hover {
      @include theme-color();
    }
  }
  .video-info-detail {
    @include color('a');
    &-list {
      .item path {
        @include fill('a');
      }
    }
  }
}
.video-toolbar-left-item {
  @include color('a');
  &:hover,
  &.on {
    @include theme-color();
  }
}
.video-toolbar-right-item:not(.dropdown-item) {
  @include color('a');
  &:hover {
    @include theme-color();
  }
}
.video-tool-more-popover {
  @include background-color('3');
  .video-tool-more-dropdown {
    .dropdown-item {
      @include color('e');
      &:hover {
        @include background-color('4');
      }
      .video-toolbar-item-icon {
        @include color('e');
      }
    }
  }
}

.playlist-container--right {
  .up-detail .up-description {
    @include color('a');
  }
}
.upinfo-btn-panel .new-charge-btn {
  @include background-color('4');
  @include color('e');
  &.charge-btn-loaded {
    @include background-color();
    @include theme-color();
    @include theme-border-color();
    &:hover {
      @include theme-background-color('20');
    }
    .charge-btn-icon {
      @include to-theme('pink');
    }
  }
}
.magic-adventures .magic-adventures-text {
  @include color('e');
}
.gift-panel {
  .gift-item {
    .gift-label {
      @include color('e');
    }
    .panel-price {
      @include color('a');
    }
  }
  .gift-item-asset {
    .b-img {
      @include background-color();
    }
  }
}
.gift-sender-panel {
  .content {
    @include background-color('2');
  }
  .feed-bar-section {
    @include background-color('4');
    @include border-color('4');
  }
}
.gift-control-panel {
  .vertical-separator {
    @include border-color('5');
  }
  .m-guard-ent,
  .m-recharge-ent {
    &:hover {
      @include background-color('3');
    }
    .guard-info,
    .balance-info {
      .title {
        @include color('a');
      }
      .guard-ent-info,
      .recharge-ent-info {
        @include color('e');
      }
      .right-arrow {
        @include border-color('e');
        path {
          @include fill('e');
        }
      }
    }
  }
}
.gift-presets {
  .gift-panel-switch {
    @include background-color('3');
    .arrow {
      @include border-color('e');
      path {
        @include fill('e');
      }
    }
  }
}
.gift-package-btn {
  @include color('e');
  &:hover {
    @include background-color('8884');
  }
}
.gift-package {
  @include color('e');
  .gift-item-asset {
    .b-img {
      @include background-color();
    }
  }
  .bag-icon {
    @include border-color('e');
    path {
      @include fill('e');
    }
  }
  &:hover {
    @include background-color('8884');
  }
  .silver-wallet {
    @include background-color('3');
    @include color('e');
  }
  .gift-item-wrap {
    .gift-item {
      &.free:hover {
        @include background-color('3');
      }
    }
    .num {
      @include color('e');
    }
  }
  .des {
    @include color('a');
  }
}
.room-introduction-tag {
  .icon-label {
    @include color('e');
  }
}
.members-info-container {
  .header {
    @include background-color('4');
    .staff-amt {
      @include color('a');
    }
    .fold-btn path {
      @include fill('e');
    }
  }
  .container {
    @include background-color();
    .staff-info {
      .staff-name {
        @include color('e');
        &.is-vip {
          @include vip-color();
        }
      }
      .info-tag {
        @include color('a');
      }
    }
  }
}
#app .bgc {
  @include background-color();
}
.bili-comment-container {
  .view-all-reply {
    @include color('e');
    &:hover {
      @include theme-color();
    }
  }
  .forward-to-dynamic {
    @include color('a');
  }
}
.bili-dyn-sidebar {
  &__btn {
    @include background-color('3');
    @include color('a');
    &:hover {
      @include background-color('4');
    }
    span::before {
      @include to-gray();
    }
  }
}
.opus-detail {
  @include background-color('4');
  @include no-shadow();
  .bili-opus-view {
    @include background-color('4');
  }
  .opus-module-author {
    &__pub__text {
      @include color('a');
    }
  }
  .opus-module-content {
    .opus-text-rich-hl {
      @include theme-color();
    }
  }
  .opus-module-topic {
    @include theme-color();
  }
  .opus-more__btn {
    @include color('a');
    &:hover {
      @include color('e');
      @include background-color('3');
    }
  }
  .opus-tabs {
    .bili-tabs {
      &__header {
        @include background-color();
        @include border-color();
      }
    }
    .bili-tabs__content {
      .comment-wrap {
        @include background-color();
      }
    }
  }
}
.side-toolbar {
  &__box,
  &__btn {
    @include background-color('3');
    &.backtop span::before {
      @include to-white();
    }
  }
  &__action {
    &,
    & svg {
      @include color('e');
    }
    &:hover,
    &.is-active {
      &,
      .side-toolbar__action__text,
      & svg {
        @include theme-color();
        path {
          @include theme-fill();
        }
      }
    }
  }
}
.bili-dyn-share {
  &-publishing {
    @include background-color('3');
    @include border-color('4');
    @include no-shadow();
    &__title {
      @include color('e');
    }
    &__input {
      .bili-rich-textarea__inner {
        @include background-color();
        &.empty::before {
          @include color('a');
        }
      }
    }
    &__reference {
      @include background-color('2');
      &__author__name {
        @include color('e');
      }
    }
    &__hint {
      @include color('a');
    }
    &__tools__item {
      &,
      &:hover {
        @include background-color();
      }
    }
    &__action {
      @include theme-background-color();
      @include foreground-color();
    }
  }
}
.home-cell-desc-title {
  @include color('e');
}
.home-cell-desc-subtitle {
  @include color('a');
}
.timeline-weekday-item .weekday-description .timeline-item-title {
  @include color('e');
}
#{contains('recommend_wrap')} {
  #{contains('recommend_title')} {
    @include color('e');
  }
}
.section-title-v2-wrapper {
  .title-right {
    @include border-color('4');
    .font {
      @include color('e');
    }
    &:hover .font {
      @include color('0');
    }
    &:not(:hover) {
      img,
      svg {
        @include to-white();
      }
    }
  }
  .title-left {
    .week-day-wrapper {
      @include background-color('3');
    }
    .module-title-name {
      @include color('e');
    }
  }
}
.index-categary-head {
  @include color('e');
}
.item-link-a {
  @include color('a');
}
.nav-tool {
  @include color('e');
  div {
    @include background-color('3');
    img {
      @include fill('e');
    }
    svg {
      circle {
        @include stroke('e');
      }
      path {
        @include fill('e');
      }
    }
    a {
      @include color('e');
      div {
        @include color('e');
      }
    }
  }
}
#{contains('mediainfo_mediaToolbar')} {
  #{contains('mediainfo_btnHome')} {
    @include theme-background-color(20);
    svg path {
      @include theme-fill();
    }
  }
  #{contains('follow_btnFollow')} {
    @include theme-background-color();
  }
  #{contains('follow_followed')} {
    @include background-color('4');
  }
  #{contains('follow_optionsList')} {
    @include background-color('3');
    @include border-color('4');
  }
}
#{contains('sponsor_sponsor_module')} {
  @include set-color('border-bottom-color', '4');
}
#{contains('rankList_sp_msg')} {
  @include border-color('4');
  @include color('e');
}
#{contains('sponsor_sponsor_count')} span {
  @include color('e');
}
#{contains('amountChoice_sp_pay_index')} {
  #{contains('payHeader_sponsor_pay_header')} {
    @include color('a');
    @include background-color('2');
    @include set-color('border-bottom-color', '4');
  }
  #{contains('amountChoice_sponsor_pay_body')} {
    span,
    div {
      @include color('e');
      input {
        @include background-color('4');
        @include color('e');
        @include border-color('2');
        &:focus {
          @include theme-border-color();
        }
      }
      a {
        @include theme-color();
      }
    }
    @include background-color('3');
  }
}
#{contains('mediainfo_mediaInfo')},
#{contains('recommend_wrap')} {
  @include set-color('border-top-color', '4');
}
#{contains('mediainfo_mediaRight')} {
  #{contains('mediainfo_media_desc_section')} #{contains('mediainfo_display_area')} #{contains('mediainfo_ellipsis')} {
    background: linear-gradient(90deg, hsla(0, 0%, 100%, 0), #222 20%, #222);
    @include theme-color();
  }
  #{contains('mediainfo_media_desc')} i {
    @include theme-color();
    @include background-color();
  }
}
#{contains('SectionSelector_SectionSelector')} {
  #{contains('SectionSelector_expand')} {
    background: linear-gradient(270deg, #444444 46.21%, hsla(210, 8%, 95%, 0));
  }
}
#{contains('PlayingIcon_playIcon')} svg path {
  @include theme-stroke();
}
#{contains('Share_boxTop')} {
  @include background-color('3');
}
#{contains('Share_boxBottom')} {
  @include background-color('4');
}
#{contains('WatchInfo_watch_more')} {
  @include background-color('3');
  @include border-color('4');
  #{contains('WatchInfo_title')} {
    @include color('e');
  }
}
#{contains('Phone_mobile_more')} {
  @include background-color('3');
  @include border-color('4');
  #{contains('Phone_top_wrapper')} {
    canvas {
      border: 5px solid #ffffff;
    }
    #{contains('Phone_video_title')} {
      @include color('e');
    }
  }
  #{contains('Phone_mobile_tip')} {
    @include color('a');
    a {
      @include theme-color();
    }
  }
}
#{contains('short_short_review_masker')} {
  #{contains('short_short_review_content')} {
    @include background-color('2');
    #{contains('header_review_edit_media_info')} {
      h4,
      p {
        @include color('e');
      }
    }
    #{contains('short_review_body_wrap')} {
      @include border-color('4');
    }
    #{contains('short_review_footer')} {
      #{contains('short_mr_long_review')} {
        @include theme-color();
      }
      #{contains('short_active')} {
        @include theme-background-color();
      }
    }
  }
}

#{contains('live-info-content')} {
  background: transparent !important;
}

#{contains('upower-pay-container')} {
  .header {
    @include background-color('0');
  }
  #{contains('content')} {
    @include background('2');
    #{contains('tab-group')} {
      #{contains('active')} {
        @include color('f');
      }
    }
    #{contains('month-charge-grade')} {
      background: #333;
    }
    #{contains('charge-grad-container')} {
      .charge-grad-item {
        background: linear-gradient(45deg, #333, #444);
      }
    }
  }
}
#bili-header-container {
  @include background-color('2');
}
.bili-button {
  &.primary {
    &.plain {
      @include background-color();
    }
  }
}
.vui_button {
  &.blue {
    @include theme-background-color();
    @include border-color();
    @include foreground-color();
    &:hover {
      @include theme-background-color('80');
    }
  }
}
.be-shielding::after,
.shielding::after {
  @include color('e');
  @include background-color();
}
.activity-game-list-item {
  .activity-card {
    @include background-color();
    .activity-card-content-head-title {
      @include color('e');
    }
    .activity-card-content-head-desc {
      @include color('a');
    }
  }
}
.activity-game-list .game-card {
  .game-card-content-head-title {
    @include color('e');
    .tag {
      @include color('a');
      @include border-color('a');
    }
  }
  .game-card-content-head-text {
    @include color('a');
  }
}
.bangumi-pgc-list {
  .media-card {
    .media-card-content-head-title {
      @include color('e');
    }
    .media-card-content-head-cv,
    .media-card-content-head-label {
      @include color('a');
    }
    .media-card-content-head-desc {
      @include color('8');
    }
  }
}

.ai-summary-van-popover {
  &.van-popover {
    @include background-color(); // 移除超出圆角的黑色背景
  }
  .tips-panel {
    @include background-color('3');
    @include color('e');
    .tips-panel-title {
      @include color('e');
    }
  }
}
.left-part-ctnr {
  .gift-left-part > [class$='-text'] {
    @include color('e');
  }
  .pointer.arrow-box {
    @include set-color('--btnBg', '5');
    @include set-color('--btnHoverBg', '6');
    .arrow path {
      @include fill('e');
    }
  }
  .inner-part {
    @include set-color('--wrapBg', '4');
  }
}
.static-feed-number-list {
  .feed-button-root .content-box {
    @include color('e');
  }
}
.feed-button-box .custom-feed-input {
  @include color('e');
}
.gift-control-panel {
  .gift-panel-box {
    @include background-color();
  }
}
.gift-panel-container-root {
  @include set-color('--gift-panel-container_background-color', '4');
  @include set-color('--gift-panel-container_container-border-color', '5');
  @include set-color('--gift-panel-container_feed-user-info-text-color', 'e');
}
.left-container {
  .new-tabs {
    @include background-color('4');
    @include border-color();
  }
}
.card-box .switch-btn img {
  filter: invert(0.8) !important;
}
.package-gift-root {
  .des-box {
    @include color('a');
    .switch {
      @include set-color('--toggle-switch-bg-color', '3');
      &.activated {
        @include set-theme-color('--toggle-switch-bg-color');
      }
    }
  }
  .new-silver-wallet {
    @include color('e');
    @include background-color('3');
  }
}
.shortcuts-ctnr {
  .shortcut-item {
    .item-icon {
      @include to-white();
    }
  }
}

.message-list-content {
  .message-content {
    @include color('f');
  }
}

.bili-dyn-card-vote,
.bili-dyn-upower-lottery__card,
.bili-dyn-card-link-common__wrap,
.bili-dyn-card-goods .bili-dyn-card-goods__wrap,
.bili-dyn-card-reserve .bili-dyn-card-reserve__card {
  @include background-color('30');
}
.bili-dyn-card-goods {
  &__mark,
  &__one__detail__price {
    @include color('a');
  }
}
.reference {
  .bili-dyn-card-reserve__card,
  .bili-dyn-card-link-common__wrap,
  .bili-dyn-card-goods__wrap {
    @include background-color('30');
  }
}
.article-content {
  .ql-container {
    background-color: rgba(0, 0, 0, 0) !important;
    @include color('cf');
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @include color('e');
  }
}
.bili-header {
  .notify-list-item,
  .hot-list-item {
    &:hover {
      @include background-color('3');
    }
  }
}
.home-empty-content__pic {
  .b-img {
    @include background-color();
  }
}

.header.space-header {
  .header-toutu,
  .header-upinfo-bg-shadow {
    z-index: 0 !important;
  }
  .header-upinfo {
    z-index: 1 !important;
  }
}

.video-argue-inner{
  @include background-color('3');
}