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

.bui-button {
  .bui-button-blue,
  .bui-button-blue:hover,
  .bui-button-gray3:hover {
    @include theme-background-color();
    @include foreground-color();
  }
}
.bpx-docker-minor {
  @include background-color();
}
.bpx-player-auxiliary {
  .bui-dropdown {
    @include background-color();
    .bui-dropdown-wrap {
      @include fill("e");
      @include color("e");
      &.bui-dropdown-unfold .bui-dropdown-icon,
      .bui-dropdown-icon:hover {
        @include theme-fill();
      }
    }
    .bui-dropdown-items {
      @include background-color("4");
      @include border-color();
      .bui-dropdown-item {
        @include color("e");
        @include background-color();
        &::before {
          @include hide();
        }
        &:hover {
          @include theme-color();
          @include background-color("2");
        }
      }
    }
  }
  .bpx-player-dm-load-status {
    @include background-color();
    @include color("a");
  }
  .bpx-player-collapse {
    .bui-collapse-body {
      @include background-color("3");
    }
    .bpx-player-dm-function {
      @include background-color();
      > * {
        @include color("e");
        @include background-color();
      }
    }
    .bpx-player-dm-wrap {
      @include background-color();
      .dm-info-row {
        @include color("a");
        .dm-info-dm {
          @include color("e");
        }
        .dm-info-block-btn,
        .dm-info-report-btn {
          @include background-color("5");
          @include border-color();
          @include color("e");
          &:hover {
            @include theme-background-color();
            @include foreground-color();
          }
        }
      }
      .bui-long-list-item-selected .dm-info-row {
        @include background-color("4");
      }
    }
    .bpx-player-dm-btn-footer {
      @include background-color();
      .bpx-player-dm-btn-history {
        &,
        &.bpx-player-disable,
        &.bpx-player-disable:hover {
          @include background-color("4");
          @include color("a");
        }
        &:hover {
          @include color("e");
        }
      }
    }
  }
  .bpx-player-block-area {
    .bpx-player-block-label {
      @include color("e");
    }
    .bpx-player-block-sync-btn {
      @include theme-color();
      @include theme-fill();
    }
    .bpx-player-block-add-input {
      @include border-color("6");
      @include color("e");
      @include background-color("4");
      &:focus-within {
        @include theme-border-color();
      }
    }
    .bpx-player-block-add-btn,
    .bpx-player-block-add-btn .bui-area {
      @include border-color();
      @include background-color("4");
      @include color("e");
      &:hover {
        @include theme-background-color();
        @include foreground-color();
      }
    }
    .bpx-player-block-list {
      @include background-color("2");
      .bpx-player-block-list-function {
        @include color("a");
      }
      .bpx-player-state-list-wrap > * {
        @include color("a");
        @include fill("a");
        &.bpx-player-block-list-delete:hover {
          @include theme-color();
          @include theme-fill();
        }
        &.bpx-player-block-list-state {
          @include theme-color();
        }
      }
      .bpx-player-block-list-line {
        @include color("e");
        @include background-color();
      }
    }
  }
  .bpx-player-contextmenu {
    @include background-color("3");
    @include border-color();
    box-shadow: 0 0 5px #222 !important;
    > li {
      @include color("e");
      &:hover {
        @include background-color("4");
      }
    }
  }
  .bpx-player-adv-danmaku,
  .bpx-player-setting {
    @include background-color();
  }
  .bpx-player-adv-danmaku-panel {
    @include border-color();
    .bpx-player-adv-danmaku-group {
      @include border-color("4");
      .bpx-player-adv-danmaku-title {
        @include color("e");
      }
    }
    .bpx-player-adv-danmaku-btn,
    .bpx-player-adv-danmaku-btn .bui-area {
      @include background-color("4");
      @include color("e");
      &.active,
      &:hover {
        @include theme-background-color();
        @include foreground-color();
      }
    }
    .bpx-player-adv-danmaku-pos-title {
      @include color("e");
    }
  }
}
.ep-list-wrapper,
.section-ep-wrapper {
  .ep-item a {
    @include color("e");
  }
}
#bilibili-player-placeholder-bottom {
  @include background-color('3');
  &-left,
  &-right {
    @include background-color('4');
  }
}
#bpx-svg-sprite-danmu-on {
  path:last-child {
    @include theme-fill();
  }
}
.bpx-player-container {
  box-shadow: 0 4px 8px 0 #0004 !important;
  .squirtle-controller {
    .squirtle-high-energy {
      @include to-theme("blue");
    }
    .squirtle-progress-timeline {
      @include theme-background-color();
    }
  }
  .bpx-player-sending-area::before {
    @include background-color();
  }
  .bpx-player-sending-bar {
    @include background-color('2');
    @include on-fullscreen {
      @include background-color();
    }
    .bpx-player-video-btn-dm,
    .bpx-player-dm-setting,
    .bpx-player-dm-switch {
      @include fill('a');
    }
    .bui-danmaku-switch-on {
      path:last-child {
        @include theme-fill();
      }
    }
    .bpx-player-dm-switch:hover,
    .bpx-player-dm-setting:hover,
    .bpx-player-video-btn-dm:hover {
      @include fill('e');
    }
    .bpx-player-dm-input {
      @include color("e");
    }
    .bpx-player-block-filter-type.bpx-player-active > * {
      @include theme-color();
      @include theme-fill();
    }
    .bpx-player-mode-selection-container .selection-span.active {
      &,
      &:hover {
        @include theme-fill();
      }
    }
    .bpx-player-video-inputbar {
      background-color: rgba(255, 255, 255, 0.06667) !important;
      .bpx-player-video-inputbar-wrap {
        @include border-color();
        .bpx-player-dm-wrap {
          a,
          a:hover {
            @include theme-color();
          }
        }
        .bpx-player-dm-hint {
          a {
            @include color("a");
            @include fill("a");
            &:hover {
              @include theme-color();
              @include theme-fill();
            }
          }
        }
      }
    }
  }
  .bpx-player-video-info {
    @include color("a");
  }
}
.twp-container .new-twp-btn {
  &.confirm,
  &.ticket,
  &.vip {
    @include theme-background-color();
    @include foreground-color();
    .current {
      @include foreground-color();
    }
  }
}
.msg-push-new {
  @include background-color("2");
  .ar-recommend-item__info {
    &--title {
      @include color("e");
    }
    &--desc .time,
    &--view {
      @include color("a");
    }
  }
}
.send-box .core-style {
  @include color("e");
}
.section.user-info {
  .user-info-title {
    @include border-color("5");
  }
  .tag-content,
  .info-value,
  .info-title {
    @include color("e");
  }
  .iconfont,
  .info-command {
    @include color("a");
  }
}
.h-notice {
  @include background-color("3");
  a {
    @include color("e");
  }
  svg path {
    @include fill("e");
  }
}
.video-info .video-data .argue {
  &,
  & i {
    color: #e1a411 !important;
  }
  background: #312d21 !important;
}
.short-review-content {
  .review-edit-header {
    .media-info {
      h4 {
        @include color("e");
      }
      .rate-tip {
        @include color("a");
      }
    }
  }
  .review-body-wrap {
    @include border-color("5");
    @include background-color("2");
    &:focus-within {
      @include theme-border-color();
    }
    textarea,
    textarea:focus-within {
      @include background-color();
      @include border-color();
    }
    .tip {
      @include color("a");
    }
    .mr-btn {
      &,
      &:hover,
      &:active {
        @include foreground-color();
        @include theme-background-color();
        @include border-color();
      }
    }
  }
}
.fans-medal-dialog {
  @include background-color("2");
  .van-dialog__title {
    @include color("e");
  }
  .van-dialog__close {
    @include color("a");
  }
}
@mixin fans-medal-list {
  .list {
    .content {
      @include border-color("4");
      @include background-color("3");

      .btn {
        @include theme-background-color();
        @include foreground-color();
      }
      &.border {
        @include theme-border-color();
        opacity: 1 !important;
      }
      .info {
        @include no-image();
        @include background-color();
        .num,
        .name {
          @include color("e");
        }
        .img,
        .image {
          @include to-theme("pink");
        }
        .limit {
          &,
          & .before {
            @include color("a");
          }
        }
        .progress {
          @include background-color("5");
          .blue {
            @include theme-background-color();
          }
        }
      }
    }
  }
}
// 粉丝勋章墙的 iframe, 实在不理解为什么这也要弄个 iframe, 还起这么泛的名称, 感觉很容易和其他地方冲突
#app > #main > .container {
  .header {
    .name {
      @include color("e");
    }
    .count {
      @include color("a");
      span {
        @include theme-color();
      }
    }
  }
  @include fans-medal-list();
}
.container.medalList {
  @include background-color();
  .title {
    .name {
      @include color("e");
    }
    img {
      @include to-theme("blue");
    }
    .mount {
      @include color("a");
    }
    .button {
      @include theme-color();
    }
  }
  @include fans-medal-list();
}
.ztolayer-dialog {
  @include background-color("2");
  .dialog-title .title {
    @include theme-color();
  }
  .dialog-body {
    @include color("e");
    .info {
      @include color("a");
    }
    .configItem .switch {
      @include to-theme("pink");
    }
  }
}
.bilibili-player-video-info-hover {
  @include background-color("2");
  &-num {
    @include color("e");
  }
  &-tips {
    @include color("a");
  }
}
#i_cecream {
  @include background-color();
  .mini-header {
    .header-entry-avatar {
      @include border-color("3");
    }
    .default-entry,
    .right-entry-icon,
    .mini-header__title > span {
      @include color("e");
    }
    .right-entry-text {
      @include color("a");
    }
    .header-upload-entry {
      @include theme-background-color();
      @include foreground-color();
      .header-upload-entry__icon {
        @include foreground-color();
      }
      &:hover {
        @include theme-background-color("90");
      }
    }
  }

  .bili-header,
  .home-header {
    @include background-color();
    &__banner {
      @include background-color("3");
    }
    &.fixed-top .home-header__bar {
      @include background-color("2");
    }
    &__channel {
      @include background-color();
      .channel-items__left {
        @include border-color('4');
      }
      .channel-link__right {
        @include color('e');
        svg {
          filter: invert(1) hue-rotate(180deg) brightness(1.5);
        }
      }
      .channel-entry-more__link,
      .channel-link {
        @include color("e");
        @include background-color("3");
        @include border-color();
        &:hover {
          @include color("e");
          @include background-color("5");
        }
      }
    }
    .channel-icons {
      &__item {
        @include color("e");
      }
      .channel-notify {
        @include border-color("2");
      }
    }
  }

  .primary-btn {
    @include color("e");
    @include background-color("3");
    @include border-color();
    &:hover {
      @include background-color("5");
    }
  }
  .area-header {
    .roll-btn {
      @include color("e");
    }
    .title {
      @include color("e");
      &:hover {
        @include theme-color();
      }
    }
    .track-switch {
      @include background-color("3");
      @include color("a");

      .switch-bar {
        @include theme-background-color();
      }
      button {
        &:hover {
          @include background-color("5");
        }
        &.is-active {
          @include foreground-color();
        }
      }
    }
  }
  :not(.aside-head) > .area-header {
    .mouse-switch > * {
      @include color("a");
      @include background-color("3");
      &:hover {
        @include color("a");
        @include background-color("5");
      }
      &.is-active {
        @include theme-background-color();
        @include foreground-color();
      }
    }
  }
  .aside-head {
    .mouse-switch > * {
      @include color("a");
      &.is-active {
        @include theme-color();
        &::after {
          @include theme-background-color();
        }
      }
    }
  }
  .aside-body {
    .list-state-error,
    .list-state-nothing,
    .list-state-loading {
      @include background-color("4");
      span {
        @include color("a");
      }
    }
  }
}
.v-popover-content {
  @include border-color();
  @include background-color("3");
}
$media-types: (video, bangumi, cheese, live, manga, movie, ogv, article);
@each $type in $media-types {
  .bili-rank-list-#{$type} {
    &__list {
      @include border-color();
      @include background-color();
    }
    &__item:nth-of-type(2n + 1) {
      @include background-color("3");
    }
    &__item:nth-of-type(2n) {
      @include background-color("4");
    }
    .rank-#{$type}-card {
      &__popover {
        @include background-color();
        &--icon,
        &--stats,
        &--subtitle,
        &--author {
          @include color("a");
        }
        &--stats {
          @include border-color("4");
        }
      }
      &__cover {
        @include background-color("3");
      }
      &__info--pts,
      &__info--schedule,
      &__info--styles {
        @include color("a");
      }
    }
  }
  .bili-#{$type}-card {
    &__info--tit {
      &:hover {
        @include theme-color();
      }
    }
    &__info--living {
      @include to-theme("pink");
    }
    &__info--pub,
    &__info--subtitle,
    &__info--styles,
    &__info--uname {
      @include color("a");
    }
    &__info--owner {
      @include color("a");
      &:hover {
        @include theme-color();
      }
    }
    .v-img,
    &__image,
    &__cover,
    &__image--wrap {
      @include background-color("3");
    }

    &__skeleton {
      &--light,
      &--text,
      &--face,
      &--cover {
        @include background-color("4");
      }
    }

    &__wrap {
      @include background-color();
    }
  }
}
.n-drawer-container .elevator {
  @include background-color("2");
  .elevator-head {
    @include color("e");
  }

  .elevator-core {
    &.is-active {
      @include background-color("3");
    }
    &:hover {
      @include background-color("4");
    }
    .name {
      @include color("e");
    }
    .icon {
      @include color("a");
    }
  }
}
#bilibili-footer {
  @include background-color();
  .split-line {
    @include background-color("4");
  }
  p {
    @include color("e");
  }
  a {
    @include color("e");
    &:hover {
      @include theme-color();
    }
  }
  .link-item .bt {
    @include color("a");
  }
  .text-con {
    &__line {
      &--link {
        @include color("a");
      }
    }
  }
}
.footer-qrcode-popover,
.footer-wechat-popover {
  .qrcode-text {
    @include color("e");
  }
}

.gm-skeleton {
  .chat-input-ctnr {
    @include border-color("3");
    @include background-color("2");
    .medal-section {
      @include border-color("3");
    }
  }
}

.suggest-wrap .suggest-item {
  @include color("e");
  &:hover {
    @include background("6e");
  }
}

#all-list {
  .sub-filter {
    @include background("6e");
  }
  .icon-tid2-arr {
    @include color("6e");
  }

  .mixin-list .user-list {
    .all-user-item > .user-row .title,
    .u-videos .video-item .video-desc {
      @include color("e");
    }
  }
}
.dyn-topic-panel {
  .topic-panel {
    @include background("4");
    &__nav {
      &-title {
        @include color("e");
      }
    }
    .relevant-topic {
      &::before {
        @include to-gray(0.8);
      }
      &:hover .relevant-topic__title {
        @include theme-color();
      }
      &__title {
        @include color("e");
      }
      &__exposed {
        @include color("a");
      }
    }
  }
}
.bili-topic-selector {
  &__search {
    .bili-topic-search {
      &__input__prefix,
      &__input__text {
        @include color("a");
      }
      &__popover {
        @include background-color("3");
        @include border-color();
      }
      &__popover.active {
        @include theme-shadow();
        .bili-topic-search {
          &__input {
            @include background-color("4");
            &__inner {
              @include color("e");
              &::placeholder {
                @include color("a");
              }
            }
            &__text {
              @include color("9");
            }
          }
        }
      }
    }
  }
  .bili-topic-item {
    &__cloud {
      &:hover {
        @include background("2");
      }
      &__prefix {
        @include to-gray(0.8);
      }
      &__name {
        @include color("e");
      }
      &__desc {
        @include color("a");
      }
    }
  }
  &__rcmd {
    &__default {
      .bili-topic-item {
        &__stela {
          @include background("3");
          &__prefix {
            @include to-theme("blue");
          }
          &__name {
            @include to-theme("blue");
          }
        }
      }
    }
    .bili-topic-rcmd-more {
      &__action {
        @include background("3");
        @include theme-color();
      }
      &__items {
        .bili-topic-item__cloud {
          &__prefix {
            @include theme-color();
          }
          &__name {
            @include color("e");
          }
        }
      }
      &__popover {
        @include background("3");
        @include border-color();
        &.hover {
          @include theme-shadow();
        }
      }
    }
  }
  &__bulletin {
    @include background("4");
    .bili-topic-item {
      &__normal {
        &:hover {
          @include theme-background("10");
        }
        &__prefix {
          @include to-theme("blue");
        }
        &__name {
          @include to-theme("blue");
        }
      }
    }
    &__clear {
      @include to-theme("blue");
    }
  }
}
.comment-setting {
  .settings-panel {
    @include background("3");
    @include border-color();
    @include theme-shadow();
    &__option {
      @include color("e");
      &:hover {
        @include color("e");
        @include background-color("2");
      }
      &--active {
        @include theme-color();
        &:hover {
          @include theme-color();
        }
      }
    }
  }
}
.toolbar-box {
  .icon-reserve.live:hover {
    @include to-theme("blue");
  }
}
.bili-popup-layer {
  @include background-color("2");
  @include border-color();
  &__content {
    .dynamic-reserve {
      &__type {
        @include color("e");
      }
      &__form__item {
        &.title {
          .bili-input {
            &::before {
              @include border-color();
            }
            &:hover::before {
              @include theme-border-color();
            }
            &__inner {
              @include color("e");
              @include background-color("4");
            }
          }
        }
        &.datetime {
          .date-input {
            input {
              @include background-color("4");
            }
            &::before {
              @include border-color();
            }
            &:hover::before {
              @include theme-border-color();
            }
            .calendar.active {
              @include to-theme("blue");
            }
          }
          .scroll-input {
            .s-input-wrap {
              &::before {
                @include border-color();
              }
              &:hover::before {
                @include theme-border-color();
              }
              .s-input {
                @include background-color("4");
                @include color("e");
              }
            }
            .s-label {
              @include color("a");
            }
            .s-panel {
              @include theme-border-color();
              @include background-color("4");
              .s-item {
                @include color("e");
                &:hover {
                  @include theme-color();
                }
              }
            }
          }
        }
      }
      &__about {
        img {
          @include to-theme("blue");
        }
        .link {
          @include theme-color();
        }
      }
    }
  }
  &__footer {
    &::after {
      @include border-color();
    }
  }
  @at-root #{&}__button {
    @include color("e");
    &.confirm {
      @include theme-background-color();
    }
    &.cancel {
      @include background("4");
    }
    &::before {
      @include border-color();
    }
  }
}
.dyn-topic {
  &__card:hover {
    @include theme-background("10");
  }
  &__icon {
    @include to-theme("blue");
  }
  &__text {
    @include theme-color();
  }
}
.base-video-sections {
  @include background-color("4");
  .first-line-title {
    @include color("e");
  }
  .next-button,
  .cur-page {
    @include color("a");
  }

  .video-sections-head_second-line {
    &,
    .abstract {
      @include color("a");
    }
  }

  .video-section-list .video-episode-card {
    @include color("e");
    &__info {
      transition: background-color .2s ease-out;
      &:hover {
        @include background-color("2");
      }
      .video-episode-card__info-duration {
        @include color("a");
      }
    }
    &__info-playing {
      @include background-color("3");
      .video-episode-card__info-title {
        @include theme-color();
      }
      .cur-play-icon {
        @include to-theme("blue");
      }
    }
  }

  .border-bottom-line {
    @include background-color("6");
  }
}
.reply-warp,
.up-info {
  .u-face .u-face__avatar {
    @include background-color("4");
  }
  .bili-avatar {
    @include no-image();
    @include background-color("4");
  }
}
.user-card-avatar,
.up-info-v1 {
  .bili-avatar {
    @include no-image();
    @include background-color("4");
  }
}
.v-wrap .float-nav {
  &__btn--fixed,
  .nav-btn-item {
    @include background-color("3");
    @include color("e");
    @include border-color();
    &:hover {
      @include theme-background-color();
      @include foreground-color();
    }
  }
}
.user-card {
  .card-user-name {
    @include color('e');
  }
  .card-social-info {
    > a {
      @include color('e');
      .social-info-title {
        @include color('a');
      }
    }
  }
  .card-sign {
    @include color('a');
  }
  .card-btn-warp {
    .card-attention-btn {
      @include theme-background-color();
      @include border-color();
      @include foreground-color();
      &.attention {
        @include background-color('4');
        @include color('e');
      }
    }
    .card-message-btn {
      @include border-color('8');
      @include color('e');
      @include background-color();
    }
  }
  .info p {
    @include color("e");
  }
  .gray-text {
    @include color("a");
  }
}
