// Markdown/article typography and code styles are extracted here for easier customization.

// 引用
blockquote {
  padding: .8em;
  margin: 10px 0;
  background-color: var(--pk-bg-box-content);
  border-left: 5px solid #c1c1c1;
  border-radius: 4px;
}

// 覆盖代码高亮样式
[id^=hljs-item] {
  font-size: 13px;

  &.pk-code-wrapped {
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    word-break: break-all !important;

    code {
      white-space: pre-wrap !important;
      word-wrap: break-word !important;
      word-break: break-all !important;
    }

    .hljs-ln-code {
      white-space: pre-wrap !important;
      word-wrap: break-word !important;
      word-break: break-all !important;
    }
  }
}

.hljs-ln-numbers {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-align: center;
  color: #8e8d8d;
  vertical-align: top;
  display: inline-block;
  margin-right: 10px;

  .hljs-ln-n {
    margin-right: 3px;
    min-width: 20px;
    word-break: normal;
  }
}

.hljs-ln-code {
  padding-left: 10px;
}

body:not(.puock-dark) {
  [id^=hljs-item] {
    background-color: #fafafa !important;

    .hljs-ln-numbers {
      color: #999;
    }
  }

  .pk-code-tools {
    background-color: #e8e8e8;
    border-bottom-color: #ddd;

    .actions .pk-code-action {
      color: #666;

      &:hover {
        color: #333;
        background-color: rgba(0, 0, 0, 0.08);
      }
    }
  }

  .hljs-comment, .hljs-quote {
    color: #998;
  }

  .hljs-keyword, .hljs-selector-tag, .hljs-subst {
    color: #333;
    font-weight: bold;
  }

  .hljs-number, .hljs-literal, .hljs-variable, .hljs-template-variable, .hljs-tag .hljs-attr {
    color: #008080;
  }

  .hljs-string, .hljs-doctag {
    color: #d14;
  }

  .hljs-title, .hljs-section, .hljs-selector-id {
    color: #900;
    font-weight: bold;
  }

  .hljs-type, .hljs-class .hljs-title {
    color: #458;
    font-weight: bold;
  }

  .hljs-tag, .hljs-name, .hljs-attribute {
    color: #000080;
  }

  .hljs-regexp, .hljs-link {
    color: #009926;
  }

  .hljs-symbol, .hljs-bullet {
    color: #990073;
  }

  .hljs-built_in, .hljs-builtin-name {
    color: #0086b3;
  }

  .hljs-meta {
    color: #999;
    font-weight: bold;
  }

  .hljs-deletion {
    background: #fdd;
  }

  .hljs-addition {
    background: #dfd;
  }
}

body.puock-dark {
  [id^=hljs-item] {
    background-color: var(--bs-body-bg) !important;

    .hljs-ln-numbers {
      color: var(--bs-tertiary-color);
    }
  }

  .pk-code-tools {
    background-color: var(--bs-dark-bg-subtle);
    border-bottom-color: var(--bs-dark-border-subtle);
  }
}

body.puock-dark-palette-blueblack:not(.puock-light) {
  .pk-code-tools {
    background-color: #0b1c2c;
    border-bottom-color: #3d3d3d;
  }
}

body.puock-dark.puock-dark-palette-blueblack {
  [id^=hljs-item] {
    background-color: #1d1f21 !important;

    .hljs-ln-numbers {
      color: #5c5c5c;
    }
  }

  .pk-code-tools {
    background-color: #141617;
    border-bottom-color: #2d2d2d;
  }
}

pre {
  padding: 10px;
  border-bottom-left-radius: var(--pk-g-box-radius);
  border-bottom-right-radius: var(--pk-g-box-radius);
  font-size: inherit;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}

body.pre-mac pre {
  font-size: 100%;
  border-radius: 4px;
  position: relative;
  margin: 20px 0 20px 0;
  padding-top: 31px !important;
  border: none;
  overflow: hidden;
  max-height: unset;
}

.entry-content, .entry-content-box {
  font-size: 15px;

  &.p-indent > p:not(.no-indent) {
    text-indent: 2rem;
  }

  a:not(.btn,.fancybox,.no-icon) {
    &:before {
      content: "\f0c1";
      font-family: var(--fa-style-family, "Font Awesome 6 Free");
      margin-right: 3px;
      font-weight: var(--fa-style, 900);
      font-size: 12px;
      display: none;
    }
  }

  &.show-link-icon {
    a:not(.btn,.fancybox,.no-icon) {
      &:before {
        display: inline-block;
      }
    }
  }

  .wp-block-gallery,
  .blocks-gallery-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    list-style: none;
    margin: 20px 0;
    padding: 0;

    .blocks-gallery-item {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      justify-content: center;
      margin: 0;
      min-width: 0;
      position: relative;

      figure {
        height: 100%;
        margin: 0;
      }

      img {
        display: block;
        height: auto;
        max-width: 100%;
        width: 100%;
      }
    }
  }

  .wp-block-gallery.has-nested-images {
    align-items: normal;

    figure.wp-block-image {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      justify-content: center;
      margin: 0;
      max-width: 100%;
      min-width: 0;
      position: relative;

      a,
      img {
        display: block;
        height: auto;
        max-width: 100%;
        width: 100%;
      }
    }
  }

  .wp-block-gallery.is-cropped,
  .blocks-gallery-grid.is-cropped {
    align-items: stretch;

    .blocks-gallery-item a,
    .blocks-gallery-item img,
    figure.wp-block-image a,
    figure.wp-block-image img {
      flex: 1;
      height: 100%;
      object-fit: cover;
      width: 100%;
    }
  }

  .wp-block-gallery.columns-1 .blocks-gallery-item,
  .blocks-gallery-grid.columns-1 .blocks-gallery-item,
  .wp-block-gallery.has-nested-images.columns-1 figure.wp-block-image {
    flex-basis: 100%;
  }

  .wp-block-gallery.columns-2 .blocks-gallery-item,
  .blocks-gallery-grid.columns-2 .blocks-gallery-item,
  .wp-block-gallery.has-nested-images.columns-2 figure.wp-block-image {
    flex-basis: calc(50% - 8px);
  }

  .wp-block-gallery.columns-3 .blocks-gallery-item,
  .blocks-gallery-grid.columns-3 .blocks-gallery-item,
  .wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image {
    flex-basis: calc(33.333% - 11px);
  }

  .wp-block-gallery.columns-4 .blocks-gallery-item,
  .blocks-gallery-grid.columns-4 .blocks-gallery-item,
  .wp-block-gallery.has-nested-images.columns-4 figure.wp-block-image {
    flex-basis: calc(25% - 12px);
  }

  .wp-block-gallery.columns-5 .blocks-gallery-item,
  .blocks-gallery-grid.columns-5 .blocks-gallery-item,
  .wp-block-gallery.has-nested-images.columns-5 figure.wp-block-image {
    flex-basis: calc(20% - 13px);
  }

  .wp-block-gallery.columns-6 .blocks-gallery-item,
  .blocks-gallery-grid.columns-6 .blocks-gallery-item,
  .wp-block-gallery.has-nested-images.columns-6 figure.wp-block-image {
    flex-basis: calc(16.666% - 14px);
  }

  .wp-block-gallery.columns-7 .blocks-gallery-item,
  .blocks-gallery-grid.columns-7 .blocks-gallery-item,
  .wp-block-gallery.has-nested-images.columns-7 figure.wp-block-image {
    flex-basis: calc(14.285% - 14px);
  }

  .wp-block-gallery.columns-8 .blocks-gallery-item,
  .blocks-gallery-grid.columns-8 .blocks-gallery-item,
  .wp-block-gallery.has-nested-images.columns-8 figure.wp-block-image {
    flex-basis: calc(12.5% - 14px);
  }

  @media (max-width: 575.98px) {
    .wp-block-gallery.columns-2 .blocks-gallery-item,
    .wp-block-gallery.columns-3 .blocks-gallery-item,
    .wp-block-gallery.columns-4 .blocks-gallery-item,
    .wp-block-gallery.columns-5 .blocks-gallery-item,
    .wp-block-gallery.columns-6 .blocks-gallery-item,
    .wp-block-gallery.columns-7 .blocks-gallery-item,
    .wp-block-gallery.columns-8 .blocks-gallery-item,
    .blocks-gallery-grid.columns-2 .blocks-gallery-item,
    .blocks-gallery-grid.columns-3 .blocks-gallery-item,
    .blocks-gallery-grid.columns-4 .blocks-gallery-item,
    .blocks-gallery-grid.columns-5 .blocks-gallery-item,
    .blocks-gallery-grid.columns-6 .blocks-gallery-item,
    .blocks-gallery-grid.columns-7 .blocks-gallery-item,
    .blocks-gallery-grid.columns-8 .blocks-gallery-item,
    .wp-block-gallery.has-nested-images.columns-2 figure.wp-block-image,
    .wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image,
    .wp-block-gallery.has-nested-images.columns-4 figure.wp-block-image,
    .wp-block-gallery.has-nested-images.columns-5 figure.wp-block-image,
    .wp-block-gallery.has-nested-images.columns-6 figure.wp-block-image,
    .wp-block-gallery.has-nested-images.columns-7 figure.wp-block-image,
    .wp-block-gallery.has-nested-images.columns-8 figure.wp-block-image {
      flex-basis: calc(50% - 8px);
    }
  }

  .p-block {
    box-shadow: none;
    border-width: 1px;
    border-style: solid;
    border-color: var(--pk-c-border);
  }

  p {
    margin: 10px 0 !important;
    line-height: 2;
  }

  video {
    max-width: 100%;
  }

  blockquote {
    p:not(:last-child) {
      margin: 0 0 10px 0 !important;
    }

    p:last-child {
      margin: 0 !important;
    }
  }

  h1, h2, h3, h4, h5, h6 {
    position: relative;
    margin: 16px 0;

    &:after {
      content: ' ';
      display: block;
      border: 2px solid var(--pk-c-primary);
      border-radius: 5px;
      width: 36px;
      opacity: .8;
      margin-top: 2px;
    }
  }

  br:before {
    display: block;
    content: ' ';
    margin: 10px 0;
  }

  .h-config(@size) {
    font-size: @size;
  }

  h1 {
    .h-config(26px)
  }

  h2 {
    .h-config(24px);
  }

  h3 {
    .h-config(22px);
  }

  h4 {
    .h-config(20px)
  }

  h5 {
    .h-config(18px)
  }

  h6 {
    .h-config(16px)
  }

  code:not([class]) {
    margin: 2px 4px;
    padding: 0 6px;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125);
    background-color: var(--pk-bg-body);
    display: inline-block;
    font-family: "Segoe UI", "Microsoft YaHei", "Hiragino Sans GB", "WenQuanYi Micro Hei", sans-serif;
    text-indent: initial;
  }

  img:not(.wp-smiley) {
    max-width: 100%;
    height: auto;
    margin: 10px auto;
    display: block;
    border-radius: 2px;
    cursor: pointer;
    transition: all .3s;

    &:hover {
      opacity: .8;
    }
  }

  .alert {
    margin-bottom: 10px;
  }

  a:not(.btn) {
    color: var(--pk-c-primary);
  }

  a:not(.btn,.hide-hover):not(.post-page-numbers) {
    transition: all .3s;

    &:hover {
      opacity: .8;
      color: rgba(var(--pk-c-primary), 60%);
    }
  }

  .btn, .p-block {
    margin-bottom: 10px !important;
  }

  pre {
    & > code {
      background-color: transparent !important;
    }
  }

  .post-foot-qrcode {
    margin-top: 20px;
    text-align: center;

    .title {
      display: inline-block;
      padding: 6px 10px;
      background: #0e0e0e;
      color: #fff;
      border-radius: 10px;
      font-size: 10px;
    }

    img {
      width: 180px;
      border-radius: 10px;
    }
  }
}

.code-toolbar {
  .toolbar {
    position: absolute;
    top: 0;
    background: #000;
    padding-top: 20px;
    border-radius: 5px;
  }
}

.pk-code-tools {
  background-color: #1a1d20;
  border-top-left-radius: var(--pk-g-box-radius);
  border-top-right-radius: var(--pk-g-box-radius);
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-items: center;
  border-bottom: 1px dashed #343a40;

  .dot {
    i {
      display: inline-block;
      width: 11px;
      height: 11px;
      border-radius: 5.5px;

      &:not(:last-child) {
        margin-right: 5px;
      }

      &:nth-child(1) {
        background-color: #FF5F56;
      }

      &:nth-child(2) {
        background-color: #FFBD2E;
      }

      &:nth-child(3) {
        background-color: #27C93F;
      }
    }
  }

  .actions {
    display: flex;
    align-items: center;
    gap: 6px;

    .pk-code-action {
      font-size: 12px;
      color: #8e8e8e;
      cursor: pointer;
      transition: all .3s;
      padding: 4px 6px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;

      &:hover {
        color: var(--pk-c-light);
        background-color: rgba(255, 255, 255, 0.1);
      }

      i {
        font-size: 13px;
      }
    }

    .i {
      font-size: 12px;
      color: var(--pk-c-light);
      cursor: pointer;
      transition: all .3s;

      &:hover {
        opacity: .7;
      }
    }
  }
}

.post-comment {
  .pk-code-tools {
    margin-top: 10px;
  }
}
