@use 'element-plus/theme-chalk/src/common/var.scss' as *;
@use 'element-plus/theme-chalk/src/mixins/config.scss' as *;
@use 'element-plus/theme-chalk/src/mixins/mixins.scss' as *;

@include b(emoji) {
  &-popper-class {
    padding: 0px !important;
  }

  &-panpel {
    margin: 6px;
  }
}

// 表情包
@include b(emoji-face) {
  overflow: hidden;
  margin-top: 2px;
  a {
    float: left;
    width: 28px;
    height: 28px;
    font-size: 0;
    text-indent: -999em;
    cursor: pointer;
    background: url(//res.wx.qq.com/t/wx_fed/webwx/res/static/img/xBw_Qtm.png)
      no-repeat;
    background-size: 434px 202px;
    margin: 2px 4px;
  }
  .face0 {
    background-position: 0 0;
  }

  .face1 {
    background-position: -29px 0;
  }

  .face2 {
    background-position: -58px 0;
  }

  .face3 {
    background-position: -87px 0;
  }

  .face4 {
    background-position: -116px 0;
  }

  .face5 {
    background-position: -145px 0;
  }

  .face6 {
    background-position: -174px 0;
  }

  .face7 {
    background-position: -203px 0;
  }

  .face8 {
    background-position: -232px 0;
  }

  .face9 {
    background-position: -261px 0;
  }

  .face10 {
    background-position: -290px 0;
  }

  .face11 {
    background-position: -319px 0;
  }

  .face12 {
    background-position: -348px 0;
  }

  .face13 {
    background-position: -377px 0;
  }

  .face14 {
    background-position: -406px 0;
  }

  .face15 {
    background-position: 0 -29px;
  }

  .face16 {
    background-position: -29px -29px;
  }

  .face17 {
    background-position: -58px -29px;
  }

  .face18 {
    background-position: -87px -29px;
  }

  .face19 {
    background-position: -116px -29px;
  }

  .face20 {
    background-position: -145px -29px;
  }

  .face21 {
    background-position: -174px -29px;
  }

  .face22 {
    background-position: -203px -29px;
  }

  .face23 {
    background-position: -232px -29px;
  }

  .face24 {
    background-position: -261px -29px;
  }

  .face25 {
    background-position: -290px -29px;
  }

  .face26 {
    background-position: -319px -29px;
  }

  .face27 {
    background-position: -348px -29px;
  }

  .face28 {
    background-position: -377px -29px;
  }

  .face29 {
    background-position: -406px -29px;
  }

  .face30 {
    background-position: 0 -58px;
  }

  .face31 {
    background-position: -29px -58px;
  }

  .face32 {
    background-position: -58px -58px;
  }

  .face33 {
    background-position: -87px -58px;
  }

  .face34 {
    background-position: -116px -58px;
  }

  .face35 {
    background-position: -145px -58px;
  }

  .face36 {
    background-position: -174px -58px;
  }

  .face37 {
    background-position: -203px -58px;
  }

  .face38 {
    background-position: -232px -58px;
  }

  .face39 {
    background-position: -261px -58px;
  }

  .face40 {
    background-position: -290px -58px;
  }

  .face41 {
    background-position: -319px -58px;
  }

  .face42 {
    background-position: -348px -58px;
  }

  .face43 {
    background-position: -377px -58px;
  }

  .face44 {
    background-position: -406px -58px;
  }

  .face45 {
    background-position: 0 -87px;
  }

  .face46 {
    background-position: -29px -87px;
  }

  .face47 {
    background-position: -58px -87px;
  }

  .face48 {
    background-position: -87px -87px;
  }

  .face49 {
    background-position: -116px -87px;
  }

  .face50 {
    background-position: -145px -87px;
  }

  .face51 {
    background-position: -174px -87px;
  }

  .face52 {
    background-position: -203px -87px;
  }

  .face53 {
    background-position: -232px -87px;
  }

  .face54 {
    background-position: -261px -87px;
  }

  .face55 {
    background-position: -290px -87px;
  }

  .face56 {
    background-position: -319px -87px;
  }

  .face57 {
    background-position: -348px -87px;
  }

  .face58 {
    background-position: -377px -87px;
  }

  .face59 {
    background-position: -406px -87px;
  }

  .face60 {
    background-position: 0 -116px;
  }

  .face61 {
    background-position: -29px -116px;
  }

  .face62 {
    background-position: -58px -116px;
  }

  .face63 {
    background-position: -87px -116px;
  }

  .face64 {
    background-position: -116px -116px;
  }

  .face65 {
    background-position: -145px -116px;
  }

  .face66 {
    background-position: -174px -116px;
  }

  .face67 {
    background-position: -203px -116px;
  }

  .face68 {
    background-position: -232px -116px;
  }

  .face69 {
    background-position: -261px -116px;
  }

  .face70 {
    background-position: -290px -116px;
  }

  .face71 {
    background-position: -319px -116px;
  }

  .face72 {
    background-position: -348px -116px;
  }

  .face73 {
    background-position: -377px -116px;
  }

  .face74 {
    background-position: -406px -116px;
  }

  .face75 {
    background-position: 0 -145px;
  }

  .face76 {
    background-position: -29px -145px;
  }

  .face77 {
    background-position: -58px -145px;
  }

  .face78 {
    background-position: -87px -145px;
  }

  .face79 {
    background-position: -116px -145px;
  }

  .face80 {
    background-position: -145px -145px;
  }

  .face81 {
    background-position: -174px -145px;
  }

  .face82 {
    background-position: -203px -145px;
  }

  .face83 {
    background-position: -232px -145px;
  }

  .face84 {
    background-position: -261px -145px;
  }

  .face85 {
    background-position: -290px -145px;
  }

  .face86 {
    background-position: -319px -145px;
  }

  .face87 {
    background-position: -348px -145px;
  }

  .face88 {
    background-position: -377px -145px;
  }

  .face89 {
    background-position: -406px -145px;
  }

  .face90 {
    background-position: 0 -174px;
  }

  .face91 {
    background-position: -29px -174px;
  }

  .face92 {
    background-position: -58px -174px;
  }

  .face93 {
    background-position: -87px -174px;
  }

  .face94 {
    background-position: -116px -174px;
  }

  .face95 {
    background-position: -145px -174px;
  }

  .face96 {
    background-position: -174px -174px;
  }

  .face97 {
    background-position: -203px -174px;
  }

  .face98 {
    background-position: -232px -174px;
  }

  .face99 {
    background-position: -261px -174px;
  }

  .face100 {
    background-position: -290px -174px;
  }

  .face101 {
    background-position: -319px -174px;
  }

  .face102 {
    background-position: -348px -174px;
  }

  .face103 {
    background-position: -377px -174px;
  }

  .face104 {
    background-position: -406px -174px;
  }
}

// 字体表情包
@include b(font-emoticon) {
  &__native {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    width: 36px;
    height: 36px;
    cursor: pointer;
  }
}

// tabs
@include b(emoji-tabs) {
  display: flex;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding: 6px 0 10px 0;
  margin: 0 6px;
  &__item {
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: all 0.3s;
    span {
      margin: 0 10px;
    }
    &:first-child {
      span {
        margin-left: 0px;
      }
    }
    &.active,
    &:hover {
      color: #1677ff;
    }
  }
  &--line {
    width: 1px;
    height: 60%;
    background-color: #ccc;
  }
}