@import './dark-definitions';

#app > .bg {
  @include no-image();
}
@mixin dyn-container-skeleton() {
  &--skeleton {
    @include background-color('4');
  }
}
.bili-dyn-live-users {
  @include dyn-container-skeleton();
  @include background-color('4');
  &__title {
    @include color('e');
    span {
      @include color('a');
    }
  }
  &__more {
    @include color('a');
    &::after {
      @include border-color('a');
    }
    &:hover {
      @include theme-color();
      &::after {
        @include theme-border-color();
      }
    }
  }
  &__item {
    &__face-container {
      box-shadow: 0 0 0 1px var(--theme-color) !important;
    }
    &__uname {
      @include color('e');
    }
    &__title {
      @include color('a');
    }
  }
}
.bili-dyn-my-info {
  @include dyn-container-skeleton();
  @include background-color('4');
  &__name {
    @include color('e');
  }
  &__stat__item {
    &__count,
    .item-num {
      @include color('e');
    }
    &:hover {
      .bili-dyn-my-info__stat__item__count,
      .item-num {
        @include theme-color();
      }
    }
    &__label,
    .item-desc {
      @include color('a');
    }
  }
}
.bili-dyn-publishing {
  @include dyn-container-skeleton();
  @include background-color('4');
  &__title {
    &__input {
      @include background-color();
      @include color('e');
      &::placeholder {
        @include color('a');
      }
    }
    &__indicator {
      @include color('a');
    }
    &__close {
      @include background-color('6');
    }
  }
  &__tools {
    &__item {
      @include color('e');
      &.active,
      &:hover {
        @include theme-color();
      }
      // 这里用 filter 会导致弹窗内容也被影响, 暂时先去掉了
      // &.active,
      // &:hover {
      //   @include to-theme('blue');
      // }
      &.emoji {
        @include background-color();
      }
    }
  }
  &__settings__btn {
    @include color('e');
    &.active,
    &:hover {
      @include theme-color();
    }
  }
  .bili-rich-textarea__inner {
    @include background-color();
    @include color('e');
    &.empty::before {
      @include color('a');
    }
  }
  &-timing-setting {
    @include background-color('2');
    &__label {
      @include color('e');
    }
  }
  &__hint {
    @include color('a');
    &::after {
      @include color('6');
    }
  }
  &__action {
    @include theme-background-color();
    @include foreground-color();
    &.disabled {
      @include background-color('6');
      @include color('a');
    }
  }
}
.bili-dyn-up-list {
  @include dyn-container-skeleton();
  @include background-color('4');
  &__prev,
  &__next {
    @include to-gray();
    &.disabled {
      opacity: 0.4 !important;
    }
    &:hover:not(.disabled) {
      @include to-white();
    }
  }
  &__shadow-left,
  &__shadow-left .shadow {
    background-image: linear-gradient(270deg, hsla(0, 0%, 100%, 0), #444) !important;
  }
  &__shadow-right,
  &__shadow-right .shadow {
    background-image: linear-gradient(90deg, hsla(0, 0%, 100%, 0), #444) !important;
  }
  &__item {
    &__face {
      @include border-color();
      box-shadow: 0 0 0 1px #999 !important;
      &.all {
        @include theme-background-color('30');
        @include no-shadow();
        img {
          @include to-theme('blue');
        }
      }
      span {
        @include theme-background-color();
        @include border-color('4');
      }
    }
    &__name {
      @include color('e');
    }
    &.active {
      .bili-dyn-up-list__item__face {
        @include theme-background-color('30');
        box-shadow: 0 0 0 1px var(--theme-color) !important;
      }
      .bili-dyn-up-list__item__name {
        @include theme-color();
      }
    }
  }
}
.bili-dyn-list-tabs {
  @include dyn-container-skeleton();
  @include background-color('4');
  &__item {
    @include color('e');
    &:hover,
    &.active {
      @include theme-color();
    }
  }
  &__highlight {
    @include theme-background-color();
  }
}
.bili-dyn-list {
  &-notification {
    @include background-color('4');
    @include theme-color();
  }
}
.bili-dyn-item {
  @include background-color('4');
  .bili-dyn-title {
    &__text {
      &:not([style*='color:']) {
        @include color('e');
      }
      &:hover {
        @include theme-color();
      }
    }
  }
  .bili-dyn-time {
    @include color('a');
    &:hover {
      @include theme-color();
    }
  }
  &__more {
    z-index: 1;
  }
  .bili-dyn-more {
    &:hover {
      @include background-color();
    }
    &__container:hover {
      @include background-color('3');
    }
    &__btn {
      &.tp {
        @include color('8');
      }
      &:hover {
        @include to-theme('blue');
      }
    }

    &__menu {
      @include color('e');
      &__item {
        &:hover {
          @include theme-color();
        }
      }
    }
  }
  .bili-dyn-action {
    @include color('a');
    &__icon {
      @include to-gray();
    }
    &.active,
    &:hover {
      @include theme-color();
      .bili-dyn-action__icon {
        @include to-theme('blue');
      }
    }
  }
  .bili-dyn-card-article,
  .bili-dyn-card-common {
    @include background-color('3');
    &:hover {
      @include no-shadow();
    }
  }
  .bili-dyn-card-music {
    @include border-color();
    @include background-color('3');
    @include no-shadow();
    &__title {
      @include color('e');
      &:hover {
        @include theme-color();
      }
    }
    &__label {
      @include color('a');
    }
  }
  .bili-dyn-card-article,
  .bili-dyn-card-pgc,
  .bili-dyn-card-common,
  .bili-dyn-card-live,
  .bili-dyn-card-video {
    @include border-color('4');
    &__body {
      @include background-color('38');
    }
    &__title {
      @include color('e');
    }
    &__desc,
    &__text,
    &__stat {
      @include color('a');
    }
    &__tag {
      &.state--1 {
        @include theme-background-color();
      }
      &.state--0 {
        @include background-color('2');
      }
    }
    &__badge {
      @include theme-background-color();
    }
    &:hover {
      .bili-dyn-card-article__title,
      .bili-dyn-card-pgc__title,
      .bili-dyn-card-common__title,
      .bili-dyn-card-live__title,
      .bili-dyn-card-video__title {
        @include theme-color();
      }
    }
  }
  .bili-dyn-topic {
    &__card {
      &:hover {
        @include theme-background-color('20');
      }
    }
    &__icon,
    &__text {
      @include theme-color();
    }
  }
  .bili-rich-text {
    &__content {
      @include color('e');
    }
    &__action {
      @include theme-color();
    }
    &-module,
    &-link,
    &-topic {
      @include theme-color();
      &::before {
        @include to-theme('blue');
      }
      &:hover {
        @include theme-background-color('20');
      }
    }
    &-module {
      @include color('e');
      &.at,
      &.vote,
      &.lottery {
        @include theme-color();
      }
    }
  }
  .bili-dyn-content {
    &__orig {
      &.reference {
        @include background-color('30');
      }
    }
    .dyn-none {
      @include color('e');
      img {
        @include to-white();
      }
    }
  }
  .dyn-orig-author {
    &__name {
      @include color('e');
      &:hover {
        @include theme-color();
      }
    }
    &__action {
      @include color('a');
    }
    &__following {
      @include theme-border-color();
      @include theme-color();
      &::before {
        @include to-theme('blue');
      }
    }
  }
  .bili-dyn-interaction {
    &::before {
      @include background-color('6');
    }
    .bili-rich-text__content {
      @include color('a');
      .at {
        @include color('e');
      }
    }
  }
  .bili-dyn-item {
    &__tag {
      @include color('e');
      box-shadow: inset 0 -1px 0 #555 !important;
    }
    &__extra {
      @include border-color('6');
    }
    &-fold {
      @include color('a');
      &:hover {
        @include theme-color();
      }
    }
  }
  .dyn-match {
    &__mark span {
      @include color('a');
    }
    &__wrap {
      @include background-color('3');
    }
    &__center__top,
    &__center__bottom,
    &__team__name,
    &__title {
      @include color('e');
    }
    &__head {
      @include border-color('5');
    }
    &__action button {
      @include theme-background-color();
      @include foreground-color();
    }
  }
  .dyn-additional-common {
    &__mark span {
      @include color('a');
    }
    &__wrap {
      @include background-color('3');
    }
    &__cover {
      @include background-color('2');
    }
    &__detail {
      &__title {
        @include color('e');
      }
      &__desc {
        @include color('a');
      }
    }
    &__action {
      button {
        @include theme-background-color();
        @include foreground-color();
        &.check {
          @include background-color('4');
          @include color('a');
        }
      }
    }
  }
  .dyn-reserve {
    &__card {
      @include background-color('3');
    }
    &__title {
      @include color('e');
    }
    &__desc {
      @include color('a');
    }
    &__action button {
      @include theme-background-color();
      @include foreground-color();
      &.check,
      &.disabled {
        @include background-color('6');
        @include color('a');
      }
    }
  }
  .dyn-ugc {
    &__wrap {
      @include background-color('3');
    }
    &__cover {
      @include background-color();
    }
    &__detail {
      &__title {
        @include color('e');
      }
      &__desc {
        @include color('a');
      }
    }
  }
  .dyn-card-opus {
    &__title {
      @include color('e');
    }
  }
  #page-dynamic & {
    @include border-color();
  }
}
.bili-dyn-item,
.bili-opus-view {
  ~ .bili-tabs {
    .bili-tabs__header {
      @include background-color('4');
      @include border-color('5');
    }
    .bili-tabs__nav__item {
      @include color('e');
      &.is-active,
      &:hover {
        @include theme-color();
      }
    }
    // .bili-tabs__content {
    //   .comment-wrap {
    //     @include background-color();
    //   }
    // }
  }
}
.reaction-list {
  .reaction-item {
    box-shadow: inset 0 -0.5px 0 0 #666 !important;
  }
}
.bili-dyn-forward {
  &__item {
    @include border-color('6');
  }
  &-item {
    &__uname:not([style*='color:']) {
      @include color('e');
    }
    &__time {
      @include color('a');
    }
    &__action {
      @include theme-color();
    }
  }
  &__more {
    @include color('a');
    @include border-color();
  }
  &-publishing {
    &__action {
      &__count {
        @include color('a');
      }
      &__btn {
        @include theme-background-color();
        @include foreground-color();
      }
    }
    &__emoji {
      @include border-color();
      @include no-shadow();
      @include color('a');
      @include background-color('2');
      i {
        @include to-gray();
      }
      &:hover {
        @include color('e');
        i {
          @include to-white();
        }
      }
    }
    &__editor {
      @include border-color();
      @include background-color('2');
      &:focus-within {
        @include theme-border-color();
      }
      .bili-rich-textarea__inner {
        @include color('e');
        @include background-color();
        &::before {
          @include color('a');
        }
      }
    }
  }
}
.bili-dyn-report {
  @include background-color('3');
  &__title {
    @include color('e');
  }
  &__message {
    @include color('a');
  }
  &__remark {
    &__tip {
      @include color('a');
    }
    &__content {
      @include background-color('2');
      @include border-color('5');
      &:focus-within {
        @include theme-border-color();
      }
    }
  }
  &__button {
    @include background-color('5');
    @include color('e');
    @include border-color();
    &.confirm {
      @include theme-background-color();
      @include foreground-color();
      @include border-color();
    }
  }
}
.bili-modal {
  @include background-color('3');
  @include color('e');
  &__title {
    @include color('e');
  }
  &__close {
    @include color('a');
  }
  &__button {
    @include background-color('5');
    @include color('e');
    @include border-color();
    &.confirm {
      @include theme-background-color();
      @include foreground-color();
      @include border-color();
    }
  }
}
.bili-dyn-banner {
  @include background-color('4');
  @include dyn-container-skeleton();
  &__title {
    @include color('e');
  }
}
.topic-panel {
  @include background-color('4');
  @include dyn-container-skeleton();
  &__nav-title {
    @include color('e');
  }
  .relevant-topic {
    &::before {
      @include to-theme('blue');
    }
    &__title {
      @include color('e');
    }
    &__exposed {
      @include color('a');
    }
    &-container__item {
      &:hover {
        @include background-color('5');
      }
    }
  }
}
.bili-dyn-list-loading {
  @include background-color('4');
}
.bili-popover {
  @include no-shadow();
  &,
  &__arrow {
    @include border-color('8884');
    @include background-color('3');
  }

  &-modal {
    &__footer::after {
      @include border-color('5');
    }
    &__button {
      border: 1px solid;
      @include color('e');
      @include background-color();
      @include border-color('8');
      &::before {
        @include border-color();
      }
      &:hover {
        @include theme-color();
        @include theme-border-color();
      }
      &.confirm:not(.disabled) {
        @include theme-background-color();
        @include border-color();
        @include foreground-color();
      }
      &.disabled {
        @include background-color('5');
        @include border-color();
        @include color('a');
      }
    }
  }
}
.bili-awesome-img {
  &--sleepy {
    @include background-color('28');
  }
}
.bili-user-profile {
  &,
  &__error,
  &__loading {
    @include background-color('3');
    @include color('e');
  }
  .bili-user-profile-view {
    &__info {
      &__uname:not([style*='color:']) {
        @include color('e');
      }
      &__stat {
        @include color('a');
        span {
          @include color('e');
        }
      }
      &__signature {
        @include color('a');
      }
      &__button {
        &.follow {
          @include border-color();
          @include theme-background-color();
          @include foreground-color();
          &.checked {
            @include background-color('5');
            @include color('a');
          }
        }
        &.chat {
          @include background-color();
          @include border-color('5');
          @include color('e');
          &:hover {
            @include theme-border-color();
            @include theme-color();
          }
        }
      }
    }
  }
}
.bili-emoji {
  @include color('e');
  &__list__item {
    &:hover {
      @include background-color('5');
    }
  }
  &__footer {
    @include background-color();
    @include border-color('4');
  }
  &__pkg {
    &:hover,
    &.active {
      @include background-color('5');
    }
  }
}
.bili-pics-uploader {
  &__title {
    @include color('e');
  }
  &__desc {
    @include color('a');
  }
}
.bili-at-popup {
  @include background-color('3');
  @include color('e');
  @include border-color('8884');
  &__hint {
    @include color('e');
  }
  &__group-name {
    @include color('a');
  }
  &__user {
    &-name {
      @include color('e');
    }
    &-fans {
      @include color('a');
    }
    &--selected {
      @include background-color('5');
    }
  }
}
.bili-create-poll {
  &__opt__title {
    @include color('e');
  }
}
.bili-input {
  &,
  &__inner {
    @include background-color();
    @include color('e');
  }
  &__count {
    @include color('a');
  }

  &::before {
    @include border-color('6');
  }
  &:focus-within::before {
    @include theme-border-color();
  }
}
.bili-radio {
  &__inner {
    @include border-color('a');
    @include background-color();
    &::after {
      @include theme-background-color();
    }
  }
  &__label {
    @include color('e');
  }
  &.checked {
    .bili-radio__inner {
      @include theme-border-color();
    }
  }
}
.bili-select-dropdown {
  @include background-color('3');
  @include theme-shadow();
  &__item {
    @include color('e');
    &:hover {
      @include background-color('5');
    }
  }
}
.bili-reserve {
  &__type {
    @include color('e');
  }
  &__form {
    &__title {
      @include color('a');
    }
  }
}
.bili-time-picker {
  &__child {
    &__unit {
      @include color('a');
    }
  }
  .bili-input {
    &__suffix {
      .bili-picker-input__suffix--up {
        @include theme-border-color();
      }
    }
  }
}
.bili-date-picker {
  &-input {
    &__suffix--calendar-active {
      @include to-theme('blue');
    }
  }
  &__header {
    @include border-color('5');
    &__label {
      @include color('a');
    }
    button i {
      @include border-color('a');
    }
  }
  &__body {
    thead {
      tr th {
        @include color('a');
      }
    }
    tbody {
      tr td {
        @include color('e');
        &.disabled {
          @include color('5');
        }
        &.active {
          @include theme-color();
          @include theme-border-color();
        }
      }
    }
  }
}
.bili-picker-panel {
  @include background-color('3');
  @include border-color('8884');
  .bili-picker {
    &__option {
      @include color('e');
      &.active {
        @include theme-color();
      }
    }
  }
}
.dyn-vote {
  @include border-color();
  &__cover {
    @include background-color('2f3436');
    @include to-theme('blue');
  }
  &__body {
    @include background-color('3');
  }
  &__detail {
    &__title {
      @include color('e');
    }
    &__desc {
      @include color('a');
    }
  }
  &__action {
    button {
      @include theme-background-color();
      @include foreground-color();
    }
  }
}
.bili-popup {
  &__wrap {
    @include background-color('2');
  }
  &__header {
    @include border-color('4');
    &__title {
      @include color('e');
    }
    &__close {
      path {
        @include fill('a');
      }
    }
  }
}
.bili-album {
  &__watch {
    &__control {
      @include background-color('2');
      &__option {
        @include color('e');
        i {
          @include to-white();
        }
        &:hover {
          @include theme-color();
          i {
            @include to-theme('blue');
          }
        }
      }
    }
    &__content {
      @include background-color('3');
    }
    &__track {
      &__item {
        &::before {
          @include theme-border-color();
        }
      }
    }
  }
  &__preview__picture {
    @include background-color();
  }
}
