@import "./dark-definitions";

.van-popper-login .container {
  @include border-color("4");
}
.dynamic-link-hover-bg .bp-img-icon {
  @include to-theme("blue");
}
.bp-right {
  .confirm-container {
    @include background-color("4");
    .content-text {
      @include color("e");
    }
    .msg-group {
      @include border-color("a");
      .msg-input {
        @include color("e");
        &::placeholder {
          @include color("a");
        }
      }
      .msg-btn {
        @include color("e");
        &::before {
          @include background-color("a");
        }
        &.msg-btn-unable {
          @include color("a");
        }
      }
    }
    .btn-group {
      .btn-common {
        @include theme-border-color();
        @include theme-color();
        @include background-color("4");
      }
      .btn-active {
        @include theme-background-color();
      }
    }
  }
}
.rcmd-list {
  .rcmd-list-title {
    @include color("e");
  }
  .remd-video-card .title {
    @include color("e");
  }
}
.bilibili-player .bui-button.bui-button-border:hover {
  @include theme-color();
  @include theme-border-color();
}
.van-popover.van-followed .follow_dropdown li {
  @include color("e");
  &:hover {
    @include theme-color();
    @include background-color("4");
  }
}
.filter-wrap .filter-wrap_bottom,
.recommend-list .split-line {
  @include background-color("4");
}
#app .collection-m .add-group .input-group .submit {
  @include theme-background-color("20");
  border-left-color: var(--theme-color) !important;
}
.b-info .balance-name,
.shop-desc .desc-box .sub-title.reserve span.highlight {
  @include theme-color();
}
.bilibili-player-video-state-buff-icon {
  path[fill="rgb(0,161,214)"] {
    @include theme-fill();
  }
  path[stroke="rgb(0,161,214)"] {
    @include theme-stroke();
  }
}
.b-head-search {
  @include border-color("4");
  &.input-active {
    @include theme-border-color();
  }
  .b-head-search_input {
    @include background-color();
    @include color("e");
  }
  .search-icon,
  .show-icon {
    @include to-theme("blue");
  }
}
.multi-page .cur-list .list-box li .link-content img {
  @include to-theme("blue");
}
.next-button .switch-button.on {
  @include theme-background-color();
  @include theme-border-color();
}
.video-sections {
  @include background-color("4");
  &-head {
    &_first-line {
      .first-line {
        &-left {
          span:not(.cur-page) {
            @include color("e");
          }
          .cur-page {
            @include color('a');
          }
        }
        &-right {
          .next-button {
            @include color('a');
          }
        }
        &-title {
          @include color("e");
          &:hover {
            @include theme-color();
          }
        }
      }
    }
    &_second-line {
      .second-line_left {
        .abstract {
          @include color('a');
        }
      }
      .second-line_right {
        @include theme-border-color();
        @include background-color("4");
        @include theme-color();
        &.already-fav {
          @include background-color("5");
          @include color("a");
        }
      }
    }
    &_desc {
      @include background-color("3");
      @include color("e");
    }
    .border-bottom-line {
      @include background-color("6");
    }
  }
  &-content-list {
    .video-sections-item {
      @include set-color("border-bottom-color", "6");
    }
    .video-section {
      &-title {
        @include background-color("4");
        span {
          @include color("e");
        }
      }
      &-list {
        .video-episode-card {
          &__info {
            &-title {
              @include color("e");
            }
            &-duration {
              @include color('a');
            }
            &-playing,
            &-title-playing {
              @include theme-color();
              @include background-color();
              .cur-play-icon {
                @include to-theme("blue");
              }
            }
          }
        }
      }
    }
  }
}
#page-fav {
  .favList-info {
    .shadow-first {
      @include background-color("2");
    }
    .shadow-second {
      @include background-color("3");
    }
    .collection-details {
      .title .iconfont {
        @include color("a");
      }
      .collection-btn {
        @include theme-background-color();
        @include color("e");
      }
    }
  }
}
.international-header .user-con.signin .item .notify-float {
  &::before {
    @include background-color("4");
  }
  .float_msg {
    @include background-color("4");
    div {
      @include color("e");
      span {
        @include theme-color();
      }
    }
  }
}
.container .left-container .play-up-info {
  .play-up-intro {
    .play-up-cover-loading,
    .play-up-introduction-loading p {
      @include background-color("4");
    }
  }
  .play-up-self .play-up-self-content a {
    @include theme-color();
  }
}

.player-auxiliary {
  @include background-color();
  &-btn-playlist-order:hover path {
    @include theme-stroke();
  }
  &-playlist-item-img {
    @include no-image;
  }
  &-playlist-item.player-auxiliary-playlist-item-active .player-auxiliary-playlist-item-title-prefix {
    @include to-theme("blue");
  }
}
.remd-video-card .card-box .pic-box {
  @include background-color("4");
}
.next-button .switch-button {
  @include border-color("6");
  @include background-color("6");
}
.video-info .video-title .tit {
  @include color("e");
}
a {
  &.name[style*="color:#FB7299"],
  &.name[style*="color: #FB7299"],
  &.name[style*="color: rgb(251, 114, 153)"],
  &.username.is_vip[style*="color:#FB7299"],
  &.c-pointer[style*="color: rgb(251, 114, 153)"] {
    @include vip-color();
  }
}
.bili-search {
  .video-item.list {
    @include set-color("border-bottom-color", "4");
    .headline {
      .type {
        @include border-color();
        @include background-color("4");
        @include color("e");
      }
      .title {
        @include color("e");
        &:hover {
          @include theme-color();
        }
      }
    }
    .des {
      @include color("a");
    }
  }
}
.main-container .tool-bar {
  .watch-info {
    > span {
      @include color("a");
    }
    #watch-together-icon-1 {
      @include fill("a");
    }
    &:hover {
      > span {
        @include theme-color();
      }
      #watch-together-icon-1 {
        @include theme-fill();
      }
    }
    .watch-more {
      @include no-shadow();
      @include background-color("4");
      @include border-color();
      .title {
        @include color("e");
      }
    }
  }
}
.error-container .error-404 img {
  @include to-theme("blue");
}
.popular-video-container {
  @include back-top-btn();
}
.m-layer .b-btn-cancel {
  @include color("e");
  &:hover {
    @include theme-color();
  }
}
.follow-btn {
  &.following,
  &.followed {
    @include border-color("");
    @include background-color("4");
    @include color("a");
    path {
      @include fill('a');
    }
  }
}
#article-list-index .index-holder {
  .article-item:not(.on) {
    .point {
      @include background-color("6");
    }
  }
  .article-item {
    .title {
      @include color("e");
      &:hover {
        @include theme-color();
      }
    }
  }
}
.main-container .bottom-brief-introduction {
  @include background-color("2");
}
.main-container {
  @include background-color();
}
.fullscreen-loading .tv-bg + .container {
  @include background-color();
  .retry-btn {
    @include theme-background-color();
  }
}
[style*="color: #00A1D6"] {
  @include theme-color();
}
.main-show-c {
  .film-change-page {
    .search {
      .append {
        @include theme-background-color();
      }
    }
    .list-container {
      .season-item {
        .change-btn {
          @include theme-border-color();
          @include theme-color();
          &:hover {
            @include theme-background-color();
            @include color("f");
          }
        }
      }
    }
  }
  .plp-r {
    .tab {
      .title-active {
        @include theme-color();
      }
    }
    .chat-container {
      .user-guide {
        .top-c {
          .l .switch-c.checked {
            @include theme-background-color();
          }
          .r:hover {
            @include theme-color();
            svg g g {
              @include theme-fill();
            }
          }
        }
        .user-share {
          @include background-color("2");
          .share-content {
            @include background-color("2");
            .left {
              .share-btn {
                &:hover {
                  span,
                  i {
                    @include theme-color();
                  }
                }
                span,
                i {
                  @include color("a");
                }
              }
              .copy-action {
                .copy-title {
                  @include color("a");
                }
                input[type="text"] {
                  @include background-color();
                  @include color("e");
                  @include border-color("4");
                }
                .copy-btn {
                  @include theme-background-color();
                }
              }
            }
            .right {
              ::after {
                @include background-color("6");
              }
            }
          }
        }
      }
      .input-area {
        .text-c {
          @include set-theme-color("caret-color");
        }
        .input-c.border {
          @include theme-border-color();
        }
      }
      .static-popup {
        @include border-color();
        @include background-color("4");
        .emoji {
          @include background-color("4");
          &:hover {
            @include background-color("2");
          }
        }
      }
    }
    .play-list {
      .header {
        .change-film {
          @include theme-background-color();
        }
      }
      .other-item {
        .current-play {
          @include to-theme("blue");
        }
      }
    }
  }
}
#user-card-container {
  @include theme-border-color();
  @include background-color("4");
  .face-cc {
    @include border-color("4");
  }
  .info .name.vip-red-name {
    @include vip-color();
  }
}
.dialog-base-wrapper .popup-content .ogv-dialog-confirm {
  @include background-color("4");
  .close .icon:hover {
    @include theme-color();
    svg path {
      @include theme-fill();
    }
  }
  .title {
    @include set-color("border-bottom-color", "6");
  }
  .short-msg .content {
    @include color("a");
  }
  .bottom-oper {
    .btn.cancel {
      @include border-color();
      @include background-color("6");
      @include color("e");
    }
    .btn.submit {
      @include theme-background-color();
    }
  }
}
.bb-comment {
  .stick.up {
    @include theme-background-color();
    @include foreground-color();
  }
  .comment-emoji {
    @include no-shadow();
  }
  .comment-send-lite {
    @include background-color("2");
  }
  .loading-state {
    @include color("a");
  }
}
.emoji-box.top:after {
  @include no-image();
}
.video-desc .desc-info {
  @include color("e");
  & + .toggle-btn {
    @include color("a");
    &:hover {
      @include theme-color();
    }
  }
  a {
    @include theme-color();
  }
}

body:not(.simplify-comment) .bb-comment {
  .comment-send-lite {
    @include background-color("2");
  }
  .comment-list .list-item .info {
    .like {
      &:hover i,
      &.liked i,
      &.liked:hover i {
        @include to-theme("blue");
      }
    }
    .hate {
      &:hover i,
      &.hated i,
      &.hated:hover i {
        @include to-theme("blue");
      }
    }
  }
}
body:not(.simplify-comment) .panel-area .bb-comment {
  .comment-send-lite {
    @include background-color("4");
  }
}

.toolbar-box {
  .emoji-btn.active,
  .emoji-btn:hover,
  .pic-box.active,
  .pic-box:hover,
  .at-icon:hover,
  .icon-topic:hover,
  .icon-vote.active,
  .icon-vote:hover,
  .icon-schedule.active,
  .icon-schedule:hover {
    @include to-theme("blue");
  }
  .static-popup .bp-arrow {
    background: none !important;
  }
}

.article-detail {
  .normal-article-holder {
    @include color("e");
  }
  .card-image {
    @include background-color("3");
  }

  .fixed-top-header {
    @include background-color("2");
    @include color("a");

    .inner {
      .inner-title,
      .inner-right > .up-info {
        @include color("e");
      }
    }
  }

  .article-breadcrumb {
    a,
    span {
      @include color("e");
    }
    a:hover {
      @include theme-color();
    }
  }

  .article-container {
    @include background-color("28");

    .article-container__content {
      @include border-color("4");
    }

    .article-read-info {
      a {
        @include color("a");
        &:hover {
          @include theme-color();
        }
      }
      span {
        @include color("a");
      }
    }
    .article-up-info {
      @include background-color();
    }
    .banner-container {
      > a > .info > .title {
        @include color("e");
      }
    }

    .title-container > .article-read-panel > .article-read-info > span.spoiler {
      @include background-color("2a");
    }

    .read-article-holder {
      .color-default,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      p {
        @include color("e");
      }
      a,
      a:hover,
      a:active {
        @include theme-color();
        &[disabled] {
          @include color("9");
        }
      }
      [class*='color-'][class*='-03'] {
        @include brightness(calc(6 / 5));
        // > * {
        //   @include brightness(5 / 6);
        // }
      }
      [class*='color-'][class*='-04'] {
        @include brightness(calc(4 / 3));
        // > * {
        //   @include brightness(3 / 4);
        // }
      }
      [class*="color-"] [class*="color-"] {
        @include brightness(1);
      }
      caption {
        @include color("a");
      }
      .default-cover {
        @include background-color("3");
        @include color("a");
      }
      .card-container {
        .row-video-holder {
          @include border-color();
          @include background-color("3");
          .row-video-tit {
            @include color("e");
          }
          .up-icon,
          .row-video-infos {
            @include color("a");
          }
          .card-text-label {
            @include theme-border-color();
            @include theme-color();
          }
          &:hover {
            .row-video-tit {
              @include theme-color();
            }
          }
        }
      }
    }

    .article-footer-box {
      .footer-text {
        @include color("e");
      }
      .article-tags {
        .iconfont,
        .tag-item {
          @include color("a");
        }
      }
    }
    .interaction-info {
      .share-box {
        @include color("a");
        .share-item i {
          @include color("a");
          &:hover {
            @include theme-color();
          }
        }
      }
      .advice-item {
        @include color("a");
        &:hover {
          @include theme-color();
        }
      }
    }
  }

  .recommend-list {
    @include background-color("28");
    .recommend-header {
      @include border-color("4");
      .title {
        @include color("e");
      }
      .more {
        @include background-color();
        @include color("e");
        &:hover {
          @include theme-color();
        }
      }
    }
    .article-item {
      @include border-color("4");
      .article-info,
      .article-info--up,
      .stats-categroy,
      .article-desc {
        @include color("a");
      }
      .stats-categroy:hover,
      .article-info--up:hover {
        @include theme-color();
      }
    }
  }

  .comment-wrapper > .comment-m {
    @include background-color();
  }
}
.z-top-container {
  @include background-color("2");
}
.coin-dialog-wrapper {
  @include background-color("2");
  .van-icon-guanbi {
    @include color("a");
  }
  .coin-title {
    @include color("e");
  }
  .coin-bottom .tips {
    @include color("a");
  }
  .coin-card-box {
    @include background-color("f");
  }
}
.right-side-bar {
  .catalog {
    @include background-color("3");
    @include color("e");

    &:hover {
      .catalog-text,
      .iconfont {
        @include theme-color();
      }
      &::after {
        @include background-color();
      }
    }
    .catalog-panel {
      @include background-color("3");
      @include no-shadow();

      .catalog-panel__title,
      .catalog-panel__info {
        @include color("e");
      }
      .catalog-panel__info:hover {
        @include theme-color();
      }
      .catalog-item:hover {
        @include background-color("29");
      }
      .catalog-item {
        .item-ul {
          @include background-color("e");
        }
        .catalog-item__text {
          @include color("e");
        }
        .iconfont {
          @include theme-color();
        }
        &:hover,
        &.catalog-item--on {
          .catalog-item__text {
            @include theme-color();
          }
        }
      }
    }
  }
  .to-top {
    @include background-color("3");
    .iconfont {
      @include color("e");
    }
    &:hover {
      @include background-color("3");
      .iconfont {
        @include theme-color();
      }
    }
  }
  .side-toolbar {
    @include background-color("3");

    .toolbar-item {
      &,
      & .iconfont {
        @include color("e");
      }
      &:hover,
      &:hover .iconfont,
      &.toolbar-on,
      &.toolbar-on .iconfont {
        @include theme-color();
        .toolbar-item__num {
          @include theme-color();
        }
      }
      canvas {
        @include to-theme("blue");
      }
    }
  }
}
.bui-precision-slider .bui-track .bui-schedule-wrap .bui-schedule-current {
  @include theme-background-color();
}
.bl-audio-panel {
  &-right-return:hover,
  &-left-show-more:hover {
    @include theme-color();
  }
  &-preset-btn.bl-audio-active {
    @include theme-background-color();
  }
}
.link-navbar .main-ctnr .nav-items-ctnr.over-width {
  @include background-color("3");
}
.content-scorller-inner .living-icon-col {
  @include theme-background-color();
}
#App .rank-module {
  .tab-bar {
    @include background-color("2");
    .tab-item {
      @include color("e");
      &:hover {
        @include theme-color();
      }
      &.on {
        @include theme-border-color();
        @include theme-color();
      }
    }
  }
  .tips {
    @include background-color("3");
    @include color("a");
  }
  .article-list .article-item .item-holder {
    @include background-color("2");
    .article-content .article-title:hover,
    .score-module .score {
      @include theme-color();
    }
    .article-content .article-left-block .article-info-bar .reply:hover {
      @include theme-color();
      @include background-color();
    }
  }
}
#page-index .video .section-title .play-all-channel,
#page-index .channel .section-right-options .play-all-channel,
#page-video .play-all-btn,
#page-channel-detail .paly-all-btn {
  @include background-color("3");
  @include color("e");
  @include border-color("3");
  &:hover {
    @include theme-color();
    @include theme-border-color();
    .video-commonplayer_play {
      @include theme-color();
    }
  }
}
.bilibili-player-video-info-tips {
  path {
    stroke: #aaa !important;
    fill: #aaa !important;
  }
  circle {
    stroke: #aaa !important;
  }
}
.shop-desc .desc-box .prize-text {
  @include theme-color();
  &::before {
    @include theme-border-color();
  }
}
.subscribe-list li {
  .subscribe-title {
    @include color("e");
  }
  .subscribe-tips {
    @include color("a");
  }
  .btn-subscribe {
    @include theme-background-color();
    @include foreground-color();
  }
}
#page-dynamic .col-2 .section-title {
  @include border-color("5");
}
.msg-notify {
  .modules .module .detail {
    @include color("a");
  }
  .notifier {
    .name {
      @include color("e");
    }
    &:hover > {
      @include theme-color();
    }
  }
}
.auto-reply-push {
  @include background-color("2");
  &__desc {
    @include color("e");
  }
  .ar-recommend-item__info {
    &--title {
      @include color("e");
    }
    &--desc .time {
      @include color("a");
    }
  }
}
.bui-progress-bar {
  &, &::before {
    @include theme-background-color();
  }
  .bui-progress-dot {
    @include theme-background-color();
  }
}
#page-404 {
  @include background-color();
  .error {
    @include color("e");
  }
  .back-btn {
    @include theme-background-color();
    @include foreground-color();
  }
}
.bilibili-player-video-btn-viewpointlist * {
  @include color("e");
  @include fill("e");
}
.hot-not-rank .hot-not-rank-text {
  @include theme-background-color("80");
  @include foreground-color();
  &:hover {
    @include theme-background-color();
  }
}
.lottery-result__content {
  @include background-color("2");
  .winners .winner {
    &__prize {
      .prize-picture {
        @include border-color("4");
        &.default {
          @include to-theme("blue");
        }
      }
      &__title {
        @include color("e");
      }
      &__desc {
        @include color("a");
      }
    }
    &__list:before {
      @include background-color("4");
    }
  }
}
