@import 'common';

@mixin mdi($content) {
  background: none !important;
  color: #000;
  body.dark & {
    color: #eee;
  }
  &::before {
    content: $content;
    display: inline-block;
    font: normal normal normal 24px/1 'Material Design Icons';
    font-size: 16px;
    line-height: 1;
    width: 16px;
    height: 16px;
  }
}
@mixin orders {
  display: flex;
  align-items: center;
  .floor {
    opacity: 0.7;
    order: 1;
  }
  .reply {
    order: 2;
  }
  .reply-tags {
    order: 3;
    display: flex !important;
    margin: 0 !important;
    span {
      margin: 0 4px 0 0 !important;
      font-size: 12px !important;
      line-height: normal !important;
      display: flex !important;
      height: auto !important;
      padding: 2px 6px !important;
    }
  }
  .operation {
    order: 4;
    flex-grow: 1;
    display: flex !important;
    justify-content: flex-end;
    margin: 0 !important;
    padding: 3px !important;
  }
}
@mixin time {
  position: absolute;
  right: 8px;
  top: 24px;
  margin: 0 !important;
  opacity: 0.5;
  line-height: normal;
  color: black;
}
@mixin reply-time {
  position: absolute;
  right: 8px;
  top: 0px;
  margin: 0;
  opacity: 0.5;
  line-height: normal;
  color: black;
}
@mixin hide {
  display: none !important;
}
@mixin transition {
  transition: all 0.2s ease-out;
}
@mixin icon {
  height: 16px !important;
  width: 16px !important;
  background-position: center !important;
  opacity: 0.4;
  display: inline-flex !important;
}
@mixin like-icon {
  @include mdi('\F0514');
}
@mixin liked-icon {
  @include mdi('\F0513');
  &,
  & + span,
  body.dark & {
    color: var(--theme-color) !important;
  }
}
@mixin hate-icon {
  @include mdi('\F0512');
}
@mixin hated-icon {
  @include mdi('\F0511');
  &,
  & + span,
  body.dark & {
    color: var(--theme-color) !important;
  }
}
@mixin spot-icon {
  @include mdi('\F01D9');
}
@mixin face-icon {
  @include mdi('\F01F5');
}
@mixin invert-on-dark {
  body.dark & {
    filter: brightness(0) invert(1) !important;
  }
}
@mixin white-text-on-dark {
  color: black;
  body.dark & {
    color: #eee !important;
  }
}
@mixin emoji-position-fix {
  .comment-send:not(.no-login) {
    position: relative !important;
  }
  .comment-send-lite:not(.no-login),
  .comment-send:not(.no-login) {
    padding-top: 15px !important;
    .dynamic-repost {
      margin-left: 81px !important;
      margin-top: 4px;
    }
    .comment-emoji {
      position: absolute !important;
      right: 0;
      top: 51px;
      width: 68px !important;
      background: #fff;
      box-sizing: content-box !important;
    }
    .comment-submit {
      height: 34px !important;
      font-size: 0;
      body.dark {
        color: var(--theme-color) !important;
      }
      &::after {
        content: '发表';
        color: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 14px;
        body.dark & {
          color: var(--foreground-color);
        }
      }
    }
  }
}

.bb-comment {
  // 兼容 b 站的 lite 版发评论(2021-04-20全量), 细节做的是真烂
  .comment-send-lite {
    position: -webkit-sticky !important;
    position: sticky !important;
    bottom: 0 !important;
    background: linear-gradient(to top, #fff, rgba(255, 255, 255, 0)) !important;
    pointer-events: none;
    width: calc(100% + 12px) !important;
    margin: 0 0 0 -12px !important;
    padding-left: 97px !important;
    body.dark & {
      background: linear-gradient(to top, #222, rgba(255, 255, 255, 0)) !important;
    }
    .comment-emoji-lite {
      background-color: #fff;
    }
    .comment-submit {
      height: 64px !important;
      padding: 4px 15px !important;
      position: relative !important;
      right: 0 !important;
      margin-left: 10px !important;
    }
    .textarea-container {
      .baffle {
        line-height: 65px !important;
      }
      .baffle,
      .ipt-txt {
        height: 65px !important;
        width: calc(100% - 80px) !important;
      }
    }
    > * {
      pointer-events: initial;
    }
  }
  .loading-state {
    font-size: 14px !important;
    height: 1.4em !important;
    line-height: 1.4 !important;
    margin: 12px 0 !important;
    // #1789
    // &:empty {
    //   margin: 0 !important;
    // }
  }
  .loading-state + .bottom-page {
    margin: 0 !important;
  }

  .nameplate,
  .comment-header .tabs-order li.on::after,
  .true-love,
  .medal,
  .medal-level,
  .reply-notice,
  .sailing,
  .perfect-reply {
    @include hide();
  }
  .comment-send-lite .comment-emoji,
  .comment-send .comment-emoji {
    box-shadow: none !important;
    span {
      opacity: 0.4;
      color: black;
    }
    .face {
      @include transition();
      @include icon();
      @include face-icon();
    }
    .text {
      @include transition();
      @include invert-on-dark();
    }
    &.open,
    &:hover {
      span,
      .face {
        opacity: 1;
      }
    }
  }
  .comment-list {
    .list-item {
      position: relative;
      .info {
        margin-top: 0 !important;
        @include orders();
        > * {
          @include h-center();
        }
        .like,
        .hate {
          i {
            @include transition();
            @include icon();
            // @include invert-on-dark();
          }
          span {
            opacity: 0.4;
            @include transition();
            @include white-text-on-dark();
          }
          // &.liked,
          // &.hated {
          //   > i {
          //     @include invert-on-dark();
          //   }
          // }
          &.liked,
          &.hated,
          &:hover {
            > * {
              opacity: 1;
            }
          }
        }
        .like {
          i {
            @include like-icon();
          }
          &.liked,
          &.liked:hover {
            i {
              @include liked-icon();
            }
          }
        }
        .hate {
          i {
            @include hate-icon();
          }
          &.hated,
          &.hated:hover {
            i {
              @include hated-icon();
            }
          }
        }
        .operation {
          &:hover {
            background: transparent !important;
          }
          .spot {
            @include transition();
            @include icon();
            @include spot-icon();
            @include invert-on-dark();
            &:hover {
              opacity: 1;
            }
          }
        }
      }
      .text {
        white-space: pre-wrap;
      }
      .user {
        margin-right: 120px;
        .level {
          visibility: hidden;
          width: 0;
          margin: 0;
        }
        .text-con {
          white-space: pre-wrap;
          display: block;
          margin: 0 !important;
        }
      }
      .user-face .hot-follow,
      .con .vote-container {
        @include hide();
      }
      > .con {
        .level-link {
          @include hide();
        }
        > .reply-box {
          transform: translateX(0%);
        }
        > .info {
          margin-top: 4px;
          > .time-location,
          > .time {
            @include time();
          }
          > .time-location,
          > .time,
          > .floor {
            @include invert-on-dark();
          }
          > .plad {
            @include hide();
          }
        }
      }
    }
    .reply-con {
      position: relative;
      > .info {
        > .time-location,
        > .time {
          @include reply-time();
          @include invert-on-dark();
        }
      }
    }
  }
  .reply-item {
    position: relative;
    > .info > .time {
      // @include white-text-on-dark();
      @include invert-on-dark();
    }
  }
  .reply-notice .notice-item {
    background-color: #0001 !important;
    border: none !important;
    display: flex !important;
    align-items: center;
    padding: 10px 14px !important;
    body.dark & {
      background-color: #333 !important;
    }
    .icon-notice {
      order: 0;
      position: static !important;
      margin-right: 12px;
      background: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="18" height="18" viewBox="0 0 24 24"><path fill="black" d="M20,11H4V8H20M20,15H13V13H20M20,19H13V17H20M11,19H4V13H11M20.33,4.67L18.67,3L17,4.67L15.33,3L13.67,4.67L12,3L10.33,4.67L8.67,3L7,4.67L5.33,3L3.67,4.67L2,3V19A2,2 0 0,0 4,21H20A2,2 0 0,0 22,19V3L20.33,4.67Z" /></svg>') !important;
    }
    a {
      order: 1;
      flex-grow: 1;
      color: black !important;
      body.dark & {
        color: #eee !important;
      }
    }
    .icon-close-notice {
      order: 2;
      position: static !important;
      background: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="18" height="18" viewBox="0 0 24 24"><path fill="black" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" /></svg>') !important;
    }
    .icon-close-notice,
    .icon-notice {
      height: 18px;
      width: 18px;
      background-position: center !important;
      opacity: 0.4;
    }
  }

  @include emoji-position-fix();
}
body.dark .panel-area .bb-comment {
  .comment-send-lite {
    background: linear-gradient(to top, #444 30%, transparent) !important;
  }
}
.dynamic-list-item-wrap {
  .info .plat {
    @include hide();
  }
  .reply-box {
    .time-location,
    .time {
      @include reply-time();
      top: 10px;
    }
  }
  .reply-item {
    > .info {
      @include orders();
    }
  }
}
.reply-item > .info {
  > .time-location,
  > .time {
    @include time();
    @include invert-on-dark();
    top: 12px;
  }
}
.reply-box .item-user {
  > a {
    margin-right: 8px;
  }
  .text {
    display: block;
  }
}
.comment-area .dynamic-level {
  @include hide();
}
.dynamic-like,
.dynamic-hate {
  i {
    @include transition();
    // @include invert-on-dark();
  }
}
.dynamic-like {
  i {
    @include like-icon();
  }
  &:hover i {
    // @include invert-on-dark();
    @include liked-icon();
  }
}
.dynamic-liked {
  &:hover i,
  i {
    // @include invert-on-dark();
    @include liked-icon();
  }
}
.dynamic-hate {
  i {
    @include hate-icon();
  }
  &:hover i {
    // @include invert-on-dark();
    @include hated-icon();
  }
}
.dynamic-hated {
  &:hover i,
  i {
    // @include invert-on-dark();
    @include hated-icon();
  }
}
.dynamic-spot {
  @include spot-icon();
  @include invert-on-dark();
}
.textarea-container .comm-tool .comm-emoji .icon-face {
  @include face-icon();
  @include invert-on-dark();
}
.dynamic-spot,
.textarea-container .comm-tool .comm-emoji .icon-face {
  @include icon();
}
.comment-list .opera-list {
  right: 20px !important;
  top: -72px !important;
}
.v-wrap #comment {
  z-index: 21 !important;
}
.l-con .tag-channel-pane {
  z-index: 22 !important;
}