@require './_code.styl';
@require './_mixins.styl';

.post-content {
  color: var(--fg-color-2);
  font-size: 16px;
  line-height: 1.75;

  a {
    position: relative;
    color: var(--accent-color);
    text-decoration: none;

    > .icon {
      margin-left: 4px;
    }

    &:hover {
      border-bottom: 1px dotted var(--accent-color);
    }
  }

  .header-anchor {
    display: none;
  }

  h1, h2, h3, h4, h5, h6 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    color: var(--fg-color-1);
    font-weight: 500;
    line-height: 1.25;
  }

  h1 {
    font-size: 2em;
  }

  h2 {
    font-size: 1.75em;
  }

  h3 {
    font-size: 1.5em;
  }

  h4 {
    font-size: 1.25em;
  }

  h5 {
    font-size: 1.1em;
  }

  h6 {
    font-size: 1em;
  }

  p, pre, ul, ol, dl, form, table, blockquote {
    margin-bottom: 1em;
  }

  ul, ol {
    margin-left: 1.2em;

    ul, ol {
      margin-bottom: 0.8em;
    }
  }

  ul {
    list-style: disc;
  }

  ul ul {
    list-style: circle;
  }

  ul ul ul {
    list-style: square;
  }

  ol {
    list-style: decimal;
  }

  ol ol {
    list-style: lower-latin;
  }

  ol ol ol {
    list-style: lower-roman;
  }

  table {
    margin: 1em 0;
    max-width: 100%;
    border-collapse: collapse;
  }

  tr {
    border-top-width: 1px;

    &:nth-child(2n) {
      background-color: var(--bg-color-2);
    }
  }

  th {
    font-weight: 600;
  }

  th, td {
    padding: 0.5em 1em;
    border-width: 1px;
  }

  blockquote {
    margin: 1em 0;
    padding: 0.8em;
    border: none;
    border-radius: 0 8px 8px 0;
    background-color: var(--bg-color-2);
    color: inherit;

    >:first-child {
      margin-top: 0;
    }

    >:last-child {
      margin-bottom: 0;
    }
  }

  img {
    display: block;
    margin: 2em auto;
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.12);
    transition: all duration(3) $base.ease;
    transform: translate3d(0, 0px, 0px);
    transform-style: preserve-3d;

    &:hover {
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
      transform: scale3d(1.02, 1.02, 1.02);
    }
  }

  hr {
    display: block;
    margin: space(8) auto;
    width: 240px;
    border-bottom: 1px dashed var(--separator-color);
  }

  strong, b {
    font-weight: bolder;
  }

  figcaption {
    color: var(--fg-color-3);
    font-size: 0.9em;
  }

  em, i {
    font-weight: inherit;
    font-style: italic;
  }

  code {
    font-size: 1em;
    font-family: var(--font-mono);
  }

  :not(pre) > code {
    padding: 2px 4px;
    color: var(--accent-color);

    &::before, &::after {
      content: '`';
    }
  }
}