/**
 * @date: 2024/3/17
 * @author: 小红
 * @fileName: codeBlock
 * @Description:代码块
 */

code[class*=language-] {
  opacity: 0;
  transition: opacity .3s;
}

pre[class*=language-] {
  &:before, &:after {
    animation-name: fa-spin;
    animation-duration: var(--fa-animation-duration, 2s);
    animation-iteration-count: var(--fa-animation-iteration-count, infinite);
    animation-timing-function: var(--fa-animation-timing, linear);
    animation-direction: var(--fa-animation-direction, normal);
    animation-delay: var(--fa-animation-delay, 0s);
    font-family: "Font Awesome 6 Duotone";
    font-weight: 900;
    letter-spacing: normal;
    -webkit-font-smoothing: antialiased;
    display: var(--fa-display, inline-block);
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;
    font-size: 30px;
    width: 33px;
    height: 33px;
    position: absolute;
    top: 50%;
    left: 50%;
    right: 0;
    bottom: 0;
    z-index: 88;
    transform: translate(-50%, -50%);
  }

  &:before {
    color: var(--fa-primary-color, inherit);
    opacity: var(--fa-primary-opacity, 1);
    content: "\e1d4";
  }

  &:after {
    content: "\e1d4\e1d4";
    opacity: var(--fa-secondary-opacity, .4);
    color: var(--fa-secondary-color, inherit);
  }


  &.code-success {
    &:before, &:after {
      display: none;
    }

    code {
      opacity: 1;
    }
  }
}

.code-toolbar {
  margin: 12px 0;
  overflow: hidden;
  box-shadow: var(--code-toolbar-box-shadow);
  border-radius: 5px;

  &:before {
    content: "";
    position: absolute;
    top: 9px;
    left: 12px;
    z-index: 1;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #fc625d;
    box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
  }

  .toolbar {
    position: absolute;
    pointer-events: none;
    opacity: 1;
    left: 0;
    right: 0;
    top: 0;
    z-index: unset;
    height: 30px;
    line-height: 30px;
    text-align: center;

    &-item:first-child {
      display: none;

      span {
        background-color: transparent;
        box-shadow: none;
      }
    }

    .custom-item {
      position: absolute;
      top: 0;
      user-select: none;
      font-size: 1rem;
      right: 12px;
      color: #999;
      pointer-events: all;

      > i {
        cursor: var(--cursor-pointer);
        margin-left: 15px;
        transition: transform 0.2s;

        &:hover {
          filter: brightness(1.2);
        }

        &.code-copy {
          font-size: .9rem;
        }
      }
    }

    // 启动展开
    &.enable-expander {

      i.code-expander {
        transform: rotate(90deg);
      }
    }

    // 启用标题
    &.enable-title {
      .toolbar-item:first-child {
        display: block;
      }
    }

    // 启动分割线
    &.enable-hr {
      border-bottom: 1px solid #b2a8a84d;
    }
  }

  pre[class*=language-] {
    position: relative;
    margin: 0;
    padding: 30px 0 0;
    overflow: hidden;
    white-space: pre;
    text-shadow: none;
    border-radius: 5px;

    .line-numbers-rows {
      border-right: none;
      left: 0;
      top: 0;
      bottom: 0;
      padding-top: 12px;
    }

    code[class*=language-] {
      display: block;
      margin-bottom: 0;
      overflow-x: auto;
      padding: 5px 18px 10px;
      border-radius: 0 0 8px 8px;
      text-shadow: none;

      &::-webkit-scrollbar {
        width: 5px;
        height: 5px;
      }

      .token.string, .style .token.string, .token.entity, .token.operator, .token.url {
        background-color: transparent;
      }
    }

    &.line-numbers {
      code[class*=language-] {
        padding: 10px 20px 10px 50px;
      }
    }
  }

}