@import "./dark-definitions";
#app {
  .header {
    .left-block {
      .logo {
        @include theme-color();
      }
      .main-site {
        @include color("e");
      }
    }
    .right-block {
      @include color("e");
      .i-frame::before {
        @include background-color();
      }
    }
  }
  .cc-nav-wrp {
    @include background-color();
    .slider-bar .bar-item .bcc-nav-slider {
      &-sub-menu {
        & > span,
        a {
          @include color("e");
        }
        .router {
          &-item.active {
            @include theme-color();
            i {
              @include theme-color();
            }
          }
          &_wrap {
            i {
              @include color("a");
            }
            &.active {
              @include theme-color();
              i {
                @include theme-color();
              }
            }
          }
        }
        &:hover {
          @include background();
        }
        &__group {
          .router-item,
          a {
            @include color("a");
          }
        }
      }
      &-item__wrap {
        .router {
          &-item.active {
            @include theme-color();
            i {
              @include theme-color();
            }
          }
          &_wrap {
            i {
              @include color("a");
            }
          }
        }
        &:hover {
          @include background();
        }
      }
    }
  }
  .cc-body {
    @include background-color();
    .message-notice_wrap .tips-item_wrap {
      @include background-color("4");
    }
    .chief-recommend-module .carousel-box,
    .data-card {
      @include background-color();
    }
    .new-calendar-wrap {
      @include background-color("2");
      .calendarEntry_box .calendarEntry_content {
        @include color("e");
        .luck_wrap .luck_title {
          @include theme-background-color();
          @include foreground-color();
        }
      }
      .headerClass {
        @include color("e");
      }
      .calendar-header {
        @include border-color("4");
      }
      .calendar-body {
        .date-wrap {
          @include color("a");
          .wrap-content .today {
            @include theme-color();
          }
        }
        .date-desc_wrap {
          @include background();
          .item-desc_card {
            @include background-color("3");
            .item-desc_title .item-title {
              @include color("e");
            }
            .item-desc_body .item-desc__content {
              @include color("e");
              @include border-color();
              .nothing-wrap {
                @include background();
                .release-link {
                  @include theme-color();
                }
              }
            }
          }
        }
        .calendar-box {
          @include border-color();
        }
      }
    }
    .notice_wrap {
      @include background-color("4");
      .notice_title .notice-txt {
        @include color("e");
      }
      .notice_body .hot-item {
        .item-left p,
        .item-right {
          @include color("a");
        }
      }
    }
    .academy-wrap {
      @include background-color();
      .header .academy-tag {
        @include color("e");
      }
      .content {
        .tabs .tabs__header {
          @include border-color("4");
          .tabs__header-item {
            @include color("a");
            &.is-active {
              @include theme-color();
              &:after {
                @include theme-background-color();
              }
            }
          }
        }
        .list-item {
          .title {
            @include color("e");
          }
          .view {
            @include color("a");
          }
        }
      }
    }
    .side-utils .feedback-container {
      .item-desc {
        @include color("e");
      }
      .bcc-popover {
        @include background-color("4");
        @include color("e");
        @include border-color();
        box-shadow: 0 7px 11px 0 rgba(0, 0, 0, 0.18) !important;
        .help-wrap li {
          .title {
            @include color("e");
            .bcc-icon-ic_enter {
              @include color("e");
            }
          }
          &:hover {
            @include background-color("3");
          }
        }
        &[x-placement^="left"] .popper__arrow {
          @include border-color();
          &:after {
            @include border-color();
          }
        }
      }
    }
    .dc-section1-body {
      @include background-color();
      .dc-section-item1_title_name p {
        @include color("e");
      }
    }
    .lab-wrap {
      @include background-color();
      .lab-guide img {
        filter: brightness(0.5) contrast(3) !important;
      }
      .lab-title {
        @include color("a");
      }
      .lab-item {
        @include border-color("4");
        .lab-item-header {
          .item-info .item-title {
            .title {
              @include color("e");
            }
            .desc {
              @include color("a");
            }
          }
          .item-operate span {
            @include color("e");
          }
        }
        .lab-item-content {
          @include background-color();
          .divide-line {
            @include background-color("4");
          }
          .content-detail {
            p {
              @include color("e");
            }
            .detail-desc,
            .feedback {
              @include color("a");
              a {
                @include theme-color();
              }
            }
            .carousel-wrapper .panel .pic .card-img img {
              filter: brightness(0.5) contrast(3) !important;
            }
          }
        }
      }
    }
    .cc-article-wrp .article {
      &-header .search-wrp {
        @include border-color();
      }
      &-card {
        .meta-status .status {
          @include theme-color();
        }
        .select-box .select-item.is-disabled {
          @include background-color();
        }
      }
    }
  }
  .detail {
    @include background-color();
  }
  .category {
    @include background-color("4");
  }
}
.el-popover {
  @include background-color("2");
  @include border-color();
  &.header-popover-download .link {
    div p:first-child {
      @include color("e");
    }
    &:hover {
      @include background-color("4");
    }
  }
}
.round-corner {
  .international-header .mini-type {
    @include background-color("2");
    box-shadow: rgba(0, 0, 0, 0.4) 0 2px 10px 1px !important;
    .nav-link .nav-link-ul {
      .nav-link-item .link .bili-Navbar_logo,
      &.mini .bili-icon_dingdao_xiazaiapp {
        @include color("e");
      }
    }
    .nav-user-center .user-con .item .name {
      @include color("e");
    }
  }
  .channel-menu-mini {
    @include background-color("2");
    box-shadow: rgba(0, 0, 0, 0.3) 0 4px 8px 0px !important;
    .r-box {
      @include border-color("4");
    }
    .box a:hover {
      @include background-color("0001");
    }
  }
  .van-popper {
    &-avatar {
      .nickname:not([style*="rgb(251, 114, 153)"]),
      .level-info .grade {
        @include color("e");
      }
      .coins,
      .counts {
        @include border-color("4");
      }
      .coins .contact {
        .email,
        .phone {
          &-icon--bind {
            @include theme-color();
          }
        }
      }
      .count-item .item {
        &-key,
        &-value {
          color: inherit !important;
        }
      }
      .links {
        @include border-color("4");
        .link-title {
          @include color("e");
        }
        .link-item:hover {
          @include background-color("3");
        }
      }
    }
    &-favorite {
      .tab-item--normal,
      .video-info .line-2 {
        @include color("e");
      }
      .tab-item--active {
        @include theme-background-color();
        @include foreground-color();
      }
      .tabs-panel {
        @include border-color("4");
      }
      .video-card:hover,
      .tab-item--normal:hover {
        @include background-color("3");
      }
      .play-all {
        @include background-color();
        @include border-color("4");
      }
    }
    &-history {
      .tab-header {
        @include border-color("4");
        .tab-item {
          @include color("e");
          &--active {
            @include theme-background-color();
            @include foreground-color();
          }
        }
      }
      .panel {
        .video-card:hover {
          @include background-color("3");
        }
        .progress {
          @include theme-background-color();
        }
        .video-info {
          span.date {
            @include background-color();
          }
          .line-2 {
            @include color("e");
          }
        }
      }
    }
  }
  .page-container {
    @include background-color();
    .bangumi-spoiler-container {
      @include background-color("4");
      @include color("e");
    }
    .tag-container {
      .tag-item {
        span {
          @include color("e");
        }
        .tag-border .tag-border-inner {
          display: none;
        }
        .tag-content {
          @include background-color("4");
          @include border-color();
        }
        &:hover .tag-content {
          @include theme-background-color();
          @include foreground-color();
        }
      }
    }
    .publish-panel {
      .core-style {
        @include background-color();
        @include color("e");
        @include border-color();
        &:hover,
        &:focus-within,
        &:active {
          @include theme-border-color();
        }
      }
      .publish-btn {
        @include background-color("2");
        @include color("e");
        &:hover {
          @include theme-background-color();
          @include foreground-color();
        }
      }
    }
  }
  .container-body {
    .b-head.topic {
      @include border-color();
    }
    .art_list li {
      @include background-color();
      @include border-color();
      h2 a {
        @include color("e");
      }
      .info,
      .artInfo {
        @include color("a");
      }
    }
  }
}
.canary-container {
  .file-list-v2-container {
    .file-title h1,
    .normal-v2-container .normal-title-wrp > h1,
    .fans-dynamic-v2-container .fans-dynamic-v2-title-wrp > h1 {
      @include color("e");
    }
    .upload-v2-sortable {
      &-chosen,
      &-ghost {
        @include background-color("4");
      }
    }
    .input-box-v2-3-container {
      @include background-color("4");
      @include border-color();
      & > input {
        @include color("e");
      }
      &.input-box-v2-3-active,
      &:hover {
        @include theme-border-color();
      }
    }
  }
  .file-content-v2-container {
    .normal-v2-container .normal-title-wrp > h1 {
      @include color("e");
    }
    .cover-v2-detail-wrp .cover-v2-selector {
      @include border-color("4");
      .cover-v2-selector-deg {
        @include background-color("4");
        @include border-color();
      }
    }
    .cover-preview-modal-container .cover-preview-modal-content {
      @include background-color("4");
      .cover-preview-modal-head {
        @include color("e");
        @include border-color();
      }
      .cover-preview-modal-body .cover-preview-modal-body-item-selected {
        @include theme-border-color();
        &-icon {
          @include to-theme("blue");
        }
      }
      .cover-preview-modal-foot div:first-child {
        @include theme-background-color();
        @include foreground-color();
      }
    }
  }
  .upload-step-3-container-v2 {
    @include background-color();
    .step-controller-v2-container .step-ctrl {
      &-complete-content,
      &-wait-content {
        @include color("a");
      }
      &-active-content {
        @include color("e");
      }
      &-complete-icon {
        @include theme-color();
        @include theme-border-color();
      }
      &-line-active {
        @include theme-background-color();
      }
      &-active-icon {
        @include theme-background-color();
        @include foreground-color();
      }
      &-line.step-ctrl-line-wait {
        @include background-color("4");
      }
      &-wait-icon {
        @include color("4");
        @include border-color("4");
      }
    }
    .upload-3-v2-success {
      &-split {
        @include background-color("4");
      }
      &-go-url a {
        @include background-color("4");
        @include color("e");
        @include border-color();
        &:hover {
          @include theme-background-color();
          @include foreground-color();
          @include border-color();
        }
      }
      &-hint-2 {
        @include color("a");
      }
    }
    .upload-3-v2-follow {
      @include background-color();
      &-title,
      &-name {
        @include color("a");
      }
      &-btn.follow {
        @include theme-background-color();
        @include foreground-color();
      }
    }
  }
}
.room-feed .tabs .item > span:after {
  @include theme-background-color();
}
.customer-service {
  .self-panel .scroll-container .item > span,
  .panel-title {
    @include color("e");
  }
  .customer-card {
    @include border-color("4");
    .card-header {
      @include background-color("4");
      .name {
        @include color("e");
      }
    }
    .card-content > a {
      @include color("a");
      &:hover {
        @include theme-color();
      }
    }
  }
  .guess-panel {
    .panel-header .title {
      @include color("e");
    }
    .question-container {
      @include border-color("4");
      .title {
        .circle {
          @include theme-background-color();
        }
        & > p {
          @include color("e");
        }
      }
      .answer {
        @include color("a");
        & > a {
          @include theme-color();
        }
      }
    }
  }
  .other-panel .card {
    .title {
      @include color("e");
      @include border-color();
    }
    .detail {
      &-text,
      p {
        @include color("e");
        & > a {
          @include theme-color();
        }
      }
      .ask-btn {
        @include theme-background-color();
        @include foreground-color();
      }
    }
  }
}
#app-body {
  #player-and-interaction-area {
    #head-info,
    .gift-control-panel,
    .aside-area {
      @include background-color("4");
    }
    #gift-control-area {
      @include border-color();
    }
  }
  #section-ctnr .header {
    @include background-color();
  }
}
.imagesbox .boost-slider-wrap .boost-slider-border {
  @include theme-border-color();
}
.superchat-content {
  @include background-color("4");
  .home-page {
    background-image: none !important;
    .introduction {
      @include color("e");
      &:before {
        @include to-white();
      }
    }
    .close {
      @include to-white();
    }
    .superchat-textarea {
      .base-info {
        @include background-color();
        .duration-tip {
          @include color("e");
          .time-icon {
            @include to-white();
          }
        }
      }
      .user-info {
        @include color("e");
      }
      .text-ctnr,
      .textarea,
      .textarea:hover {
        @include background-color();
      }
    }
    .trans-btn {
      @include theme-color();
      @include theme-border-color();
    }
    .price-options {
      .price-option {
        @include color("e");
        &.selected {
          @include theme-color();
          @include theme-border-color();
        }
      }
      .other {
        @include color("e");
        .input {
          @include background-color();
          @include color("e");
        }
      }
    }
  }
  .buy-btn {
    @include theme-background-color();
    @include foreground-color();
  }
  .super-rank {
    @include background-color("4");
    .top {
      .header-title {
        @include color("e");
      }
      .nav {
        @include background-color("2");
        .nav-item {
          &-1,
          &-2 {
            @include color("e");
            &.active {
              @include theme-background-color();
              @include foreground-color();
            }
          }
        }
      }
    }
    .list-box {
      .empty>.box {
        @include background-color();
        .h2>.special {
          @include theme-color();
        }
      }
      .message-item {
        &-info {
          .rank-icon>.num {
            @include background-color("2");
            @include color("e");
          }
          &>.user-info .publish-date,
          &>.amount {
            @include color("a");
          }
        }
        &-context {
          @include color("e");
        }
      }
      .anchor-item {
        &-info {
          &>.user-info {
            .amount,
            .room,
            .message-info {
              @include color("a");
            }
            .user-name {
              @include color("e");
            }
          }
          .rank-icon>.num {
            @include background-color("2");
            @include color("e");
          }
        }
        &-assists>.sub-tit {
          @include color("e");
        }
      }
      .keep-text {
        @include color("a");
      }
    }
    .on-list-anchor>.right {
      @include theme-color();
    }
    .not-list {
      &>.left {
        &>.rank,
        &>.aside {
          @include color("a");
          .special {
            @include theme-color();
          }
        }
      }
      &>.right {
        @include theme-color();
      }
    }
  }
}
.rank-item {
  @include border-color("4");
  .other {
    @include border-color("4");
    span {
      @include color("a");
    }
    .other-link {
      .title {
        @include color("e");
      }
      &:hover .title {
        @include theme-color();
      }
    }
  }
}
.card-content .tag {
  @include theme-background-color();
  @include foreground-color();
}
.wide-members .avatar {
  &-list {
    i {
      @include background-color("2");
      &:hover {
        @include theme-color();
      }
    }
    .van-icon-general {
      &_back_s:after {
        background: linear-gradient(-270deg,#222,hsla(0,0%,100%,0)) !important;
      }
      &_enter_s:after {
        background: linear-gradient(270deg,#222,hsla(0,0%,100%,0)) !important;
      }
    }
  }
  .tag {
    @include background-color("2");
    @include color("e");
    @include theme-border-color();
  }
  .up-name {
    @include color("e");
  }
}
.router-view {
  .list .top {
    @include background-color("3");
  }
  .config {
    @include background-color("4");
    @include color("e");
    .css-o1815x {
      @include to-theme("blue");
    }
    .config-item {
      &:not(:first-child)::before {
        @include background-color("5");
      }
      .radio-selector {
        @include color("e");
      }
    }
  }
}
.message-list {
  .share-card .footer {
    @include color("a");
    @include border-color("4");
  }
  .msg-push {
    @include background-color("2");
    hr {
      @include background-color("4");
    }
  }
}
.live-skin-coloration-area .rank-cntr {
  .daily-text {
    @include color("e");
  }
}
.guard-rank-cntr .rank-cntr .btn-box {
  &.btn-hundreds {
    display: none !important;
  }
  .daily-record-title {
    @include background-color("2");
    @include color("e");
  }
  .l-line,
  .r-line {
    @include border-color();
  }
  .guard-daily-record .daily-text {
    @include color("e");
  }
}
.live-record-list {
  .live-record-list-cntr {
    @include background-color("4");
    @include border-color();
    .record-title {
      @include color("e");
    }
    .pagination {
      @include background-color();
      .jumping-ctnr .jumping-input {
        @include background-color("2");
      }
    }
  }
}
.bp-svg-icon.taobao-link {
  @include to-theme("blue");
}
.home-page {
  .fixed-bg,
  .fixed-bg-cover {
    background-image: none !important;
  }
}

.cinema-movie-wrapper {
  .title {
    @include color("e");
  }
  .preview-item {
    .title:hover {
      @include theme-color();
    }
    .cover {
      @include background();
    }
  }
  div[name="web_tag"] {
    a {
      @include color("e");
      &:hover {
        @include theme-color();
      }
    }
  }
  div[name="web_rank"] {
    .more {
      @at-root #icon_操作_前往 {
        @include fill("e");
      }
    }
  }
  div[name="web_index"] {
    .card {
      z-index: 0;
    }
  }
  .coming-soon-wrapper .mine {
    @include color("e");
    @include background-color("4");
    @include border-color();
    &:hover {
      @include background-color("3");
    }
  }
  .card-wrapper .card-item {
    .time-line-wrapper.empty .date {
      @include color("a");
    }
    .follow-btn.followed {
      @include background-color("3");
      @include color("a");
    }
    .title:hover {
      @include theme-color();
    }
  }
  .banner-wrapper .side-list .side-item.selected:hover .title {
      @include theme-color();
    }
  .filter-wrapper .filter-block {
    .filter-block-title span {
      @include color("e");
    }
    .filter-list a.filter-item {
      @include color("a");
      &:hover {
        @include theme-color();
      }
    }
  }
  .hot-recom-wrapper {
    .hot-title {
      @include color("e");
    }
    .hot-trailer .player-list {
      @include background-color("4");
      .list-count {
        @include color("a");
        .num {
          @include theme-color();
        }
      }
      .list-item-wrap .list-item {
        .list-desc {
          @include color("e");
        }
        &.selected {
          @include background-color("2");
          .list-cover {
            @include theme-border-color();
            &:after {
              @include to-theme("pink");
            }
          }
        }
      }
    }
  }
  .activity-wrap .title {
    @include color("e");
  }
  .pindan-wrap,
  .rank-wrap {
    .slider-contro span {
      @include background-color("4");
    }
    .head-section .title,
    .preview-item .text .title {
      @include color("e");
    }
  }
  .hot-wrapper {
    .title,
    .right .recent-item a {
      @include color("e");
    }
  }
  .rank-wrap .head-section .more span {
    @include foreground-color();
    @include border-color();
    &:hover {
      @include theme-background-color();
    }
  }
}
.popup-card {
  @include background();
  .info {
    @include background-color("4");
    .title {
      @include color("e");
      &:hover {
        @include theme-color();
      }
    }
    .style .style-item {
      @include background-color("2");
      @include color("a");
    }
    .time {
      @include color("a");
      .split-line {
        @include background-color("a");
      }
    }
    .desc {
      @include color("a");
    }
    .action-group .follow-btn {
      @include theme-border-color();
      .follow-icon g#方案1 {
        @include fill("e");
      }
      &.followed {
        @include background-color("3");
        @include border-color("3");
        @include color("a");
      }
    }
  }
}
.live-up {
  .live-detail {
    .up-name {
      @include color("e");
    }
    .live-name {
      @include color("a");
    }
  }
  .live-up-img {
    @include border-color();
    box-shadow: 0 0 0 1px var(--theme-color) !important;
  }
}
.most-viewed-panel {
  @include background-color("4");
  .list-content .most-viewed-item {
    .name {
      @include color("a");
      &.active {
        @include theme-color();
      }
    }
    &:hover .name {
      @include theme-color();
    }
    .section .avatar .red-dot {
      @include theme-background-color();
      @include border-color("4");
    }
  }
}