@import './dark-definitions';
.series {
  .bt-top .bt {
    @include color('e');
  }
  .van-pagination {
    @include color('e');
    &-point {
      @include background-color('3');
      .van-pagination-item:hover,
      .van-pagination-active {
        @include theme-background-color();
      }
    }
    &-btn-next,
    &-btn-prev {
      @include color('e');
      @include background-color('4');
      @include border-color();
    }
    &-pager {
      li {
        @include color('e');
      }
    }
  }
  .switch-button {
    @include background-color('3');
    &.on {
      @include theme-background-color();
    }
    &.on::after,
    &::after {
      @include color('e');
    }
  }
  .series-box .video-card-common {
    @include background-color();
  }
}
.multi-page .cur-list .list-box li .duration {
  @include color('a');
}
.interact-dialog .dialog-body {
  @include background-color('2');
  &::before {
    content: '';
    background: url(https://s1.hdslb.com/bfs/static/jinkela/video/asserts/interact-dialog.png);
    filter: invert(1);
    background-size: 242px 198px;
    width: 242px;
    height: 198px;
    display: block;
    position: absolute;
    background-repeat: no-repeat;
    clip-path: inset(60% 35% 0 35%);
  }
}
#app {
  .channel-sidebar {
    .search-history-panel {
      @include background-color('3');
      @include border-color('4');
      .history-item {
        &:hover,
        &.focus {
          @include background-color('2');
        }
        .item-value {
          @include color('e');
        }
        .delete-icon:hover {
          @include theme-color();
        }
      }
      .clear-btn {
        @include theme-color();
      }
    }
  }
  .search-container {
    @include background-color();
    .header-info {
      .title {
        @include color('e');
      }
      .count {
        @include color('a');
      }
    }
    .card-list {
      .header-info,
      .channel-info {
        .title {
          @include color('e');
        }
      }
      .channel-btns,
      .channel-btn {
        @include to-theme('blue');
      }
      .list {
        .video-card {
          .video-name {
            @include color('e');
            &:hover {
              @include theme-color();
            }
          }
        }
      }
    }
    @include back-top-btn();
  }
}
#page-dynamic,
.detail-card {
  .bb-comment {
    .no-login {
      .textarea-container {
        .baffle,
        .comment-submit {
          @include background-color('6');
        }
      }
      .comment-emoji {
        @include background-color('6');
      }
    }
  }
}
.back-top-tools {
  @include back-top-btn('.backup', '&');
}
.s-space {
  .follow-main {
    .follow-header {
      .follow-tabs {
        @include color('e');
        span:hover {
          @include theme-color();
        }
        .active {
          @include theme-color();
          &::before {
            @include set-theme-color('border-bottom-color');
          }
          &::after {
            @include theme-background-color();
          }
        }
      }
      .search-component {
        &:hover {
          @include theme-border-color();
        }
        &.search-component-focus {
          @include border-color('a');
        }
        .search-component-input input {
          @include background-color();
          @include color('e');
        }
        .icon-follow-search:hover {
          @include to-theme('blue');
        }
      }
      .follow-search-result {
        @include color('a');
      }
    }
  }
  .album-content {
    .album-list {
      &__title {
        @include color('e');
      }
      &__tabs {
        @include background-color('2');
        .album-list__tab {
          &-name {
            @include color('e');
          }
        }
        .album-list__tab--active {
          .album-list__tab-name {
            @include theme-color();
          }
        }
      }
      &__content {
        .album-card {
          &__title {
            @include color('e');
            &:hover {
              @include theme-color();
            }
          }
        }
      }
    }
  }
  .search-page {
    @include background-color('4');
    .search-nav {
      @include color('e');
    }
    .search-nav-item {
      .num {
        @include color('a');
      }
      &:hover {
        @include background-color('5');
        .text {
          @include theme-color();
        }
      }
      &.search-nav-actived {
        @include theme-background-color();
        .text,
        .num {
          @include foreground-color();
        }
      }
    }
    .feed-dynamic {
      @include border-color();
      .feed-dynamic-header-search-kw,
      .feed-dynamic-header-title {
        @include color('e');
      }
      .feed-dynamic-header-search {
        @include color('a');
      }
      .feed-dynamic-header-search-count {
        @include theme-color();
      }
      .card .main-content .single-icon {
        @include grayscale();
      }
    }
  }
}
.switch-wrap {
  .type {
    &.active i,
    &.active:hover i {
      @include to-theme('blue');
    }
    &.imgleft:not(.active) {
      &:hover i {
        background-position: -148px -376px !important;
        opacity: 1;
      }
      i {
        opacity: 0.7;
        transition: opacity 0.2s ease-out;
      }
    }
    &.aver:not(.active) {
      &:hover i {
        background-position: -194px -376px !important;
        opacity: 1;
      }
      i {
        opacity: 0.7;
        transition: opacity 0.2s ease-out;
      }
    }
  }
}
.sponsor-mini-rank {
  .sponsor-rank-container {
    .sponsor-rank-item:nth-child(n + 4) {
      .sp-rank {
        @include color('e');
      }
    }
  }
}
.sponsor-rank-dialog {
  .sponsor-rank-content {
    @include background-color('4');
    ::-webkit-resizer,
    ::-webkit-scrollbar-thumb {
      @include background-color('3');
      &:hover {
        @include background-color('5');
      }
    }
    .sp-rank-header {
      .sp-list-nav {
        @include set-color('border-bottom-color', '5');
      }
    }
    .sp-rank-body {
      .sp-rank-list {
        .sponsor-rank-item {
          &:nth-child(n + 4) .sp-rank i {
            @include background-color('3');
            @include color('e');
          }
          .sp-user:not([class~='vip']) {
            @include color('e');
          }
          .sp-msg {
            @include background-color('3');
            @include border-color();
            &::before {
              @include set-color('border-top-color', '3');
              @include set-color('border-left-color', '3');
              @include background-color('3');
            }
            p {
              @include color('e');
            }
          }
        }
      }
    }
  }
}
.sponsor-pay-content {
  .sponsor-pay-header {
    @include set-color('border-bottom', '5');
  }
  .sponsor-pay-body {
    .sponsor-choice {
      .active .sponsor-border {
        @include background-color();
      }
      .sponsor-border {
        @include background-color('3');
      }
      .active input[name='custom-amount'] {
        @include color('e');
      }
      input[name='custom-amount'] {
        @include background-color('3');
        @include color('6');
      }
    }
  }
  .sp-pay-qrcode {
    .sponsor-qrcode {
      .step-other {
        @include to-theme('blue');
      }
    }
  }
}
#biliMainHeader {
  .mini-header,
  .base-mini-header {
    @include background-color('2');
    .base-mini-header-logo {
      @include to-white();
    }
    .base-nav-link-main,
    .base-mini-header-pulldown-icon,
    .base-nav-link-item {
      @include color('e');
    }
    .base-mini-upload {
      @include theme-background-color();
      @include foreground-color();
    }
  }
}
.v-wrap .vcd .cover {
  @include background-color('4');
}
.live-btn-ctnr {
  .icon-arrow-right {
    @include theme-color();
  }
}
// TODO 修复 html 样式误伤，导致圆角无法呈现的问题
#app-container {
  .share-step {
    .ogv-card {
      .name {
        @include color('e');
      }
      @include background-color('3');
    }
    .bp-emoji-box {
      @include color('e');
    }
  }
}
.link-footer .footer-img-linker li {
  a:hover .footer-img-item {
    @include color('e');
    @include border-color();
  }

  .footer-img-item {
    @include border-color('a');
  }
}
div[role='alertdialog'] .link-popup-panel {
  top: unset !important;
  .popup-content-ctnr p {
    @include color('a');
  }
}
.streamer-calendar {
  @include background-color('2');
  .subscribe-tips {
    @include color('e');
  }
  .streamer-calendar-nav {
    @include background-color('4');
    @include border-color();
    .tabs-wrapper {
      .tabs {
        .tabs-item {
          &:hover {
            @include color('e');
          }
          &::after {
            @include theme-background-color();
          }
          &.tabs-item-active {
            @include color('e');
          }
        }
      }
    }
    .month-tabs-btn {
      @include background-color();
      &:hover,
      &:focus {
        @include to-theme('blue');
      }
    }
    .month-tabs-title {
      @include color('e');
    }
    .streamer-calendar-description {
      @include color('a');
    }
    .btn-blue {
      @include theme-background-color();
    }
  }
  .calendar-watch {
    // .calendar-recommend{}
    .calendar-follow {
      @include border-color();
      @include background-color('4');
      .calendar-follow-title {
        @include color('e');
        .calendar-follow-description {
          @include color('a');
        }
      }
      .calendar-follow-empty {
        .calendar-follow-empty-tips {
          margin-left: 36px;
          & p {
            @include color('e');
          }
        }
      }
      .calendar-follow-cards-container {
        .anchor-card {
          .anchor-card-avatar {
            @include border-color('6');
          }
          .anchor-card-info {
            .anchor-card-title {
              @include color('e');
            }
            .anchor-card-action {
              @include theme-background-color();
            }
          }
        }
      }
    }
    .calendar-search {
      @include border-color();
      @include background-color('4');
      .calendar-search-top {
        .calendar-search-title {
          @include color('e');
        }
        .calendar-search-input-wrapper {
          @include background-color('3');
          .calendar-search-input {
            @include color('e');
          }
          .calendar-search-action:hover {
            @include to-theme('blue');
          }
        }
      }
      .calendar-search-content {
        .anchor-card-info {
          .anchor-card-avatar {
            @include border-color('6');
          }
          .anchor-card-title {
            @include color('e');
          }
        }
        .calendar-search-message {
          @include color('a');
        }
      }
    }
    .basic-calendar {
      @include border-color();
      .basic-calendar-thead {
        .basic-calendar-thead-th {
          @include color('a');
          @include border-color('6');
          @include background-color('4');
        }
      }
      .basic-calendar-tbody {
        .basic-calendar-item {
          @include border-color('6');
          @include background-color('3');
          .calendar-item-top {
            .calendar-item-date {
              .calendar-item-today {
                @include theme-background-color();
              }
              &:not(.calendar-item-today) {
                filter: invert(1);
              }
            }
            .calendar-item-switch-cards-wrapper {
              @include background-color();
              .calendar-item-switch-cards {
                @include background-color();
                &:not([disabled='disabled']):hover {
                  @include theme-background-color();
                }
                @include border-color('6');
              }
            }
          }
          .calendar-item-card-wrapper {
            .calendar-card {
              @include border-color();
              @include background-color('3');
              .calendar-card-top {
                .calendar-card-time {
                  @include color('e');

                  &.calendar-card-time-end {
                    @include color('a');
                  }
                }
                .calendar-card-follow {
                  @include theme-background-color();
                  &.calendar-card-follow-subscribed {
                    @include background-color('5');
                  }
                }
              }
              .calendar-card-info {
                .calendar-card-anchor {
                  @include color('e');
                }
              }
              .calendar-card-title {
                @include color('a');
              }
              &.calendar-card-follow-highlight {
                @include theme-background-color();
                .calendar-card-top .calendar-card-time {
                  @include color('e');
                }
                .calendar-card-title {
                  @include color('3');
                }
              }
            }
          }
          .calendar-item-cards-wrapper-odd {
            .calendar-item-card-wrapper:nth-of-type(2n) .calendar-card {
              @include background-color('4');
            }
          }
          .calendar-item-cards-wrapper-even {
            .calendar-item-card-wrapper:nth-of-type(odd) .calendar-card {
              @include background-color('4');
            }
          }
        }
      }
    }
  }
  .share-panel {
    @include border-color();
    @include background-color('4');
  }
  .side-bar {
    .side-bar-btn {
      @include theme-color();
      @include border-color();
      @include background-color('4');
      .side-bar-btn-icon {
        @include to-theme('blue');
      }
    }
  }
}
html {
  &,
  body {
    @include background-color();
  }
  &:not(.iframe) {
    &,
    body {
      background-color: var(--bg1, #222) !important;
    }
  }
}
.bb-comment .comment-list .list-item {
  .text .jump-img,
  .text-con .jump-img {
    @include to-theme('blue');
  }
}
// 进度条 viewport
.bilibili-player-view-points[data-type='-1'] > span {
  @include background-color('aaaa');
}
.resizable-component {
  .note-drag-bar {
    @include background-color('4');
    @include color('a');
    .status-bar {
      @include color('a');
    }
    .operation-btns {
      .space-btn,
      .question-btn,
      .close-btn {
        @include background-color('5');
        @include color('d');
        &:hover {
          @include theme-color();
        }
      }
    }
  }

  .ai-summary-popup {
    @include border-color('3');
    @include background-color('2');
    .ai-summary-popup-tips-text {
      @include color('e');
    }
    .ai-summary-popup-header {
      &::after {
        @include background-color('e');
      }
      .ai-summary-popup-header-clickable-area {
        @include to-gray();
      }
    }
    .ai-summary-popup-body {
      .ai-summary-popup-body-abstracts {
        @include color('e');
      }
      .ai-summary-popup-body-outline .section:hover {
        @include background-color('3');
      }
    }
  }
  // B 站的父容器和 note-container 圆角没对齐，会漏一点白色出来
  &.note-pc {
    @include background-color('3');
  }
  .note-container {
    overflow: hidden; // B 站写的 .note-detail 容器溢出了
    @include border-color();
    @include background-color('3'); // 修复上述圆角对齐问题
    .note-header {
      @include background-color('3');
      .note-title,
      .back-note-list,
      .jump-note-package,
      .close-note {
        @include color('e');
        @include background-color('3');
        svg {
          @include to-white();
        }
        &:active {
          @include background-color('2');
        }
      }
      .note-operation {
        @include background-color('4');
      }
    }
    .note-content {
      .note-card-container .note-card {
        @include background-color('2');
        .note-content {
          @include background-color('2');
          @include color('e');
        }
      }
      .note-detail {
        @include background-color('3');
        @include color('e');
        .up-desc-container .desc-top .up-name {
          @include to-white();
        }
        .preview-editor {
          @include color('e');
        }
        .note-operation .sanlian-box {
          @include background-color('4');
          @include border-color('3');
        }
      }
      .note-editor {
        .ql-editor,
        .ql-toolbar,
        .ql-picker-options,
        .ql-picker-label {
          @include background-color('2');
          @include color('e');
        }
        .ql-bar {
          &:not(.ql-active) {
            i,
            svg {
              cursor: pointer;
              &:not(:hover) {
                @include to-white();
              }
            }
          }
          &.ql-active {
            i,
            svg {
              @include theme-color();
            }
          }
        }
      }
    }
  }
}
.bili-note {
  @include background-color('3');
  .ql-toolbar {
    @include color('9');
    @include background-color();
    .readonly-mask {
      background-color: #000 !important;
      opacity: 0.4 !important;
    }
    .ql-stroke {
      @include set-color('stroke', '9');
    }
    .ql-picker {
      color: inherit !important;
    }
    .ql-picker-label {
      &:hover,
      &.ql-active {
        @include theme-color();
      }
      &:hover {
        .ql-stroke {
          @include set-theme-color('stroke');
        }
        .ql-fill {
          @include set-theme-color('fill');
        }
      }
    }
    .ql-picker-options {
      @include background-color();
      @include color('a');
    }
    .ql-picker-item:hover,
    button.ql-active,
    button:hover,
    .ql-picker-item.ql-selected {
      @include theme-color();
    }
    .ql-tag {
      @include theme-background-color();
    }
    .edit-btn {
      @include theme-border-color();
      @include theme-color();
      &.save-edit {
        @include color('e');
        @include theme-background-color();
      }
    }
    // 修复 个人空间 - 我的笔记 下按钮颜色使用原生颜色的问题
    button {
      @include color('9');
    }
  }
  .editor-innter {
    @include color('e');
    @include border-color();
    @include background-color('2');
    .ql-tag-blot {
      .time-tag-item {
        @include background-color('3');
        @include border-color();
        @include theme-color();
        .time-tag-item__text::before {
          @include theme-background-color();
        }
      }
    }
    .ql-image-preview {
      box-shadow: 0 2px 8px 0 hsl(0deg 0% 15% / 50%) !important;
      @include border-color();
      .img-preview {
        @include border-color('3');
      }
    }
  }
}
.modalBox {
  @include color('e');
  @include background-color('4');
  .cancel {
    @include color('e');
    @include border-color();
    @include background-color('6');
  }
  .sure {
    @include theme-background-color();
  }
}
.member-container .up-info .attention {
  @include theme-background-color();
}
.wide-members .avatar-list .van-icon-general_addto_s {
  @include theme-background-color();
}
.be-dropdown-item:hover {
  @include theme-color();
}
.fav-main {
  .album-card {
    .btn {
      @include color('e');
      @include border-color();
      @include background-color('2');
    }
  }
}
.pugv-item {
  .item-infos {
    .main-title {
      @include color('e');
    }
  }
}
.bilibili-player-popup-area {
  .bilibili-player-video-popup-follow {
    @include background-color('4');
    &:not(.bilibili-player-video-popup-followed) {
      @include theme-background-color();
    }
  }
  .bilibili-player-video-popup-active svg,
  path[fill] {
    @include set-theme-color('fill');
  }
  path[stroke] {
    @include set-theme-color('stroke');
  }
}
.is-max .percentage-bar {
  @include theme-background-color('40');
}
.vote-options .checked {
  @include to-theme('pink');
}
.article-tab .article-list .list-item .fold-box:hover {
  @include theme-color();
}
.header-video-card .video-info .line-1 {
  @include color('e');
}
.van-popper {
  .level-content {
    .level-intro {
      @include color('e');
      @include background-color('3');
      &__link {
        @include theme-color();
        svg {
          @include set-theme-color('fill');
        }
      }
    }
  }
  .logout span {
    @include color('e');
    &:hover {
      @include background-color('3');
    }
  }
}
.list-item {
  &:hover,
  &.active {
    @include background-color('3');
  }
}
#bili-icon_dingdao_yingbi {
  path {
    @include set-theme-color('fill');
  }
}
.player-auxiliary-playlist-item:hover .player-auxiliary-playlist-item-title {
  @include theme-color();
}
.gift-panel-box {
  @include border-color();
  .gift-tab {
    @include color('e');
    &.active {
      @include theme-color();
      .name {
        @include set-theme-color('border-bottom-color');
        @include theme-color();
      }
      .underline {
        @include theme-border-color();
      }
    }
    .name {
      @include set-color('border-bottom-color', 'a');
    }
  }
  .gift-reveal-header {
    @include border-color('5');
  }
}
#app .container .question {
  @include color('e');
}
@each $module in home, video, article, search {
  .music-#{$module} {
    .tabs {
      @include set-color('border-bottom-color', '6');
      a.active {
        @if $module == search {
          .name {
            @include theme-color();
            @include set-theme-color('border-bottom-color');
          }
        } @else {
          @include theme-color();
          @include set-theme-color('border-bottom-color');
        }
      }
      @if $module == search {
        a:hover .name {
          @include theme-color();
        }
      }
    }
    .search-bar {
      @include border-color('6');
      input {
        @include color('e');
      }
    }
    .select-type {
      @include color('e');
      li {
        @include background-color('3');
        &.on {
          @include theme-background-color();
        }
      }
      .toggle {
        @include border-color();
        @include background-color('3');
      }
    }
    @if $module != home {
      .music-pagination {
        a,
        span {
          @include color('e');
          @include border-color();
          @include background-color('3');
          &:hover {
            @include theme-background-color();
          }
        }
        .current {
          @include theme-background-color();
        }
      }
    }
    @if $module == article {
      .article-card {
        @include set-color('border-bottom-color', '6');
        .l-con:hover h2 {
          @include theme-color();
        }
      }
    }
    @if index(home search, $module) {
      .exchange-btn i {
        @include color('e');
      }
    }
  }
}
@each $module in topic, active {
  .#{$module}-list {
    @include back-top-btn('.back-top', null);
  }
}
.vp-container {
  @include set-color('border-bottom-color', '4');
}
.bb-comment .reply-notice .notice-item {
  @include theme-background-color();
}
.video-page-card .card-box .info .title:hover {
  @include theme-color();
}
.bilibili-player-video-interactive-list {
  .small.hover circle {
    @include set-theme-color('fill');
  }
}
.control-panel-ctnr {
  @include background-color('4');
  .chat-input-ctnr {
    @include border-color('3');
    @include background-color('2');
    &.chat-input-focus {
      @include theme-border-color();
    }
    .medal-section {
      @include border-color('3');
      &.focus-textarea {
        @include theme-border-color();
      }
    }
  }
  .control-panel-icon-row .icon-item {
    &.danmu-block-icon {
      @include fill('e');
    }
    &.active,
    &:hover {
      @include theme-fill();
    }
  }
}
#control-panel-ctnr-box {
  @include no-image;
}
.live-web-player-controller {
  .vertical-slider-wrap,
  .horizontal-slider-wrap {
    .slider-handle,
    .slider-track {
      @include theme-background-color();
    }
  }
  .danmaku .handle {
    @include theme-background-color();
  }
  .quality-wrap .quality-it.selected {
    @include theme-color();
  }
  input[type='radio']:checked + label::before {
    @include theme-background-color();
    @include theme-border-color();
  }
}
.bilibili-player-drag-mask-progress .bilibili-player-drag-mask-progress-tempo {
  @include theme-background-color();
}
.list-wrapper {
  @at-root #eplist_module &.detail .ep-item {
    @include background-color();
    &:hover .ep-title {
      @include theme-color();
    }
  }
  .ep-item.visited:not(.cursor) {
    @include color('a');
  }
}
.bp-popup-panel {
  #editor {
    @include background-color('3');
    @include color('e');
  }
  .publish-btn {
    @include theme-background-color();
  }
}
.article-action .more .more-ops-list ul li:hover {
  @include theme-color();
}
.bilibili-player-context-menu-container ul > li {
  a {
    @include color('e');
    &:hover {
      @include background-color();
    }
  }
}
.coin-dialog-mask .like-checkbox {
  @include color('e');
  i {
    @include to-theme('blue');
  }
}
.international-home .rcmd-box-wrap .change-btn {
  @include border-color();
  @include color('e');
  @include background-color('4');
  &:hover {
    @include theme-background-color();
  }
}
.bangumi-options .opt-list li {
  @include background-color('3');
  @include color('e');
  &:hover {
    @include theme-color();
    @include background-color('4');
  }
  &.disabled {
    @include color('a');
    @include background-color();
  }
}
.emoji-tab-slider {
  .prev,
  .next {
    filter: invert(1);
  }
}
