.article-detail {
  &__header {
    width: 100%;
    height: 100%;
    @include flex-box-center;
    flex-direction: column;
  }

  &__title {
    margin-bottom: 8px;
    @include themify() {
      color: themed('color-white');
    }
    -webkit-animation: titleScale 1s;
    -moz-animation: titleScale 1s;
    -o-animation: titleScale 1s;
    -ms-animation: titleScale 1s;
    animation: titleScale 1s;
    font-weight: 400;
    font-size: 2.5em;
    line-height: 1.5;
    -webkit-line-clamp: 3;
  }

  &__info, &__info > a {
    padding: 0 12px;
    @include themify() {
      color: themed('light-grey');
    }
  }

  .info-2 {
    margin-top: 8px;
  }

  &__update {
    margin-top: 20px;
    padding: 14px;
    text-align: right;
    @include themify() {
      color: themed('headline-presudo');
    }
  }

  &__like {
    margin-top: 20px;
    padding: 14px;
    text-align: center;
  }

  &__copyright {
    margin-top: 28px;
  }

  &__share {
    margin-top: 12px;
  }

  &__prevnext {
    margin-top: 28px;
  }

  &__comment {
    margin-top: 32px;

    .comment__title {
      padding: 16px 0;
      font-size: 20px;
      font-weight: 700;

      > [class^='el-icon-'] {
        font-weight: 700;
      }

      span {
        margin-left: 12px;
      }
    }

    .comment__total {
      font-size: 25px;
      font-weight: bold;
      margin-top: 28px;
    }

    .comment__list {
      margin-top: 28px;
    }

    .comment__page {
      @include flex-box-center;
      padding: 16px 0;
    }
  }

  &__body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Lato, Roboto, 'PingFang SC',
    'Microsoft JhengHei', 'Microsoft YaHei', sans-serif;
    line-height: 2;

    code, pre {
      @include themify() {
        font-size: themed('font14');
      }
      font-family: consolas, Menlo, "PingFang SC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif !important
    }

    code {
      padding: 2px 4px;
      background: rgba(27, 31, 35, .05);
      color: #f47466
    }

    pre {
      padding: 10px 20px
    }

    pre code {
      padding: 0;
      background: 0 0;
      @include themify() {
        color: themed('hl-color');
      }
      text-shadow: none
    }

    .code-toolbar {
      border-radius: 8px;
      padding-top: 24px;

      > pre {
        border-radius: 0 0 8px 8px;
      }

      > .toolbar {
        opacity: 1 !important;
        width: 100%;
        top: 0px !important;
        right: 0px !important;
        background: #30343f;
        border-radius: 8px 8px 0 0;

        .toolbar-item:first-child {
          float: right;
          margin-right: 12px;
        }

        .copy-to-clipboard-button {
          color: #bbb !important;
          cursor: pointer;
          background: transparent !important;
        }

        .copy-to-clipboard-button:hover {
          color: #bbb !important;
        }
      }

      .toolbar-item__content {
        width: 100%;
        height: 32px;
        padding: 0 14px;
        display: flex;
        align-items: center;

        span {
          display: inline-block;
          width: 12px;
          height: 12px;
          border-radius: 6px;
          background: rgb(252, 98, 93);
          box-shadow: rgb(253, 188, 64) 20px 0px, rgb(53, 205, 75) 40px 0px;
        }
      }
    }


    img {
      width: 100%;
      height: 100%;
    }

    .table-wrap {
      overflow-x: scroll;
      margin: 0 0 20px
    }

    table {
      display: table;
      width: 100%;
      border-spacing: 0;
      border-collapse: collapse;
      empty-cells: show
    }

    table thead {
      background: rgba(18, 99, 208, 0.1)
    }

    table td, table th {
      padding: 6px 12px;
      @include themify() {
        border: 1px solid themed('light-grey');
      }
      vertical-align: middle
    }

    code {
      padding: 2px 4px;
      background: rgba(27, 31, 35, .05);
      color: #f47466
    }

    a {
      @include themify() {
        color: themed('a-hover-color')
      }
      text-decoration: none;

      &:hover {
        text-decoration: underline
      }
    }

    img {
      display: block;
      margin: 0 auto 20px;
      max-width: 100%;
      -webkit-transition: filter 375ms ease-in .2s;
      -moz-transition: filter 375ms ease-in .2s;
      -o-transition: filter 375ms ease-in .2s;
      -ms-transition: filter 375ms ease-in .2s;
      transition: filter 375ms ease-in .2s
    }

    p {
      margin: 0 0 16px
    }


    blockquote {
      margin: 0 0 20px;
      padding: 12px 15px;
      @include themify() {
        border-left: 3px solid themed('default-bg-color');
        background-color: themed('blockquote-bg');
        color: themed('blockquote-color')
      }
    }

    blockquote footer cite:before {
      padding: 0 5px;
      font-family: "FontAwesome";
      content: '—'
    }

    blockquote > :last-child {
      margin-bottom: 0 !important
    }

    a:hover:after {
      @include themify() {
        color: themed('pseudo-hover')
      }
    }

    a:after {
      opacity: 0
    }

    h1:hover a.headerlink:after, h2:hover a.headerlink:after, h3:hover a.headerlink:after, h4:hover a.headerlink:after, h5:hover a.headerlink:after, h6:hover a.headerlink:after {
      opacity: 1;
      -ms-filter: none;
    }

    ol ol, ol ul, ul ol, ul ul {
      padding-left: 20px
    }

    ol li, ul li {
      margin: 4px 0
    }

    ol p, ul p {
      margin: 0 0 8px
    }

    hr {
      margin: 20px 0
    }

    h1, h2, h3, h4, h5, h6 {
      -webkit-transition: all .2s ease-out;
      -moz-transition: all .2s ease-out;
      -o-transition: all .2s ease-out;
      -ms-transition: all .2s ease-out;
      transition: all .2s ease-out;

      > a:after {
        float: right;
        @include themify() {
          color: themed('headline-presudo');
        }
        font-family: "FontAwesome";
        content: '111';
        font-size: .95em;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        -ms-transition: all .3s;
        transition: all .3s
      }
    }

    h1:before, h2:before, h3:before, h4:before, h5:before, h6:before {
      position: inherit;
      top: calc(50% - 7px);
      @include themify() {
        color: themed('pseudo-hover')
      }
      font-family: "FontAwesome";
      content: '\f0e7  ';
      line-height: 1;
      -webkit-transition: all .2s ease-out;
      -moz-transition: all .2s ease-out;
      -o-transition: all .2s ease-out;
      -ms-transition: all .2s ease-out;
      transition: all .2s ease-out
    }

    h1:hover:before, h2:hover:before, h3:hover:before, h4:hover:before, h5:hover:before, h6:hover:before {
      @include themify() {
        color: themed('default-bg-color')
      }
    }

    h1 {
      padding-left: 32px
    }

    h1:before {
      margin-left: -26px;
      font-size: 20px
    }

    h1:hover {
      padding-left: 38px
    }

    h2 {
      padding-left: 30px
    }

    h2:before {
      margin-left: -24px;
      font-size: 18px
    }

    h2:hover {
      padding-left: 36px
    }

    h3 {
      padding-left: 28px
    }

    h3:before {
      margin-left: -22px;
      font-size: 16px
    }

    h3:hover {
      padding-left: 34px
    }

    h4 {
      padding-left: 26px
    }

    h4:before {
      margin-left: -20px;
      font-size: 14px
    }

    h4:hover {
      padding-left: 32px
    }

    h5 {
      padding-left: 24px
    }

    h5:before {
      margin-left: -18px;
      font-size: 12px
    }

    h5:hover {
      padding-left: 30px
    }

    h6 {
      padding-left: 24px
    }

    h6:before {
      margin-left: -18px;
      font-size: 12px
    }

    h6:hover {
      padding-left: 30px
    }

    ol p, ul p {
      margin: 0 0 8px
    }

    li::marker {
      @include themify() {
        color: themed('default-bg-color')
      }
      font-weight: 600;
      font-size: 1.05em
    }

    li:hover::marker {
      @include themify() {
        color: themed('pseudo-hover')
      }
    }

    ul > li {
      list-style-type: circle
    }

    ol > li {
      list-style-type: decimal;
    }
  }
}
