@use 'valaxy/client/styles/mixins/index.scss' as *;

.markdown-body .prose {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    position: relative;
  }

  p {
    color: var(--sakura-color-text);
    line-height: 30px;
  }

  a {
    position: relative;
    color: var(--sakura-color-action);
    text-decoration: none;
    transition:
      color 0.2s ease-out,
      border 0.2s ease-out,
      opacity 0.2s ease-out;

    &:hover {
      color: var(--sakura-color-primary);
    }

    &::after {
      content: '';
      position: absolute;
      width: 100%;
      transform: scaleX(0);
      height: 2px;
      bottom: 0;
      left: 0;
      background-color: var(--sakura-color-primary);
      transform-origin: bottom right;
      transition: transform 0.25s ease-out;
    }

    &:hover::after {
      transform: scaleX(1);
      transform-origin: bottom left;
    }
  }

  ul,
  ol {
    border: 1px dashed var(--sakura-color-divider);
    padding: 15px 10px 15px 50px;
    color: var(--sakura-color-text);
    margin-left: 0;
    border-radius: 10px;
  }

  ul {
    list-style: disc;

    li > p {
      margin-bottom: 0;
    }
  }

  ol {
    list-style: decimal;

    // reset styles
    & > li::before {
      display: none;
    }
  }

  ol li,
  ul li {
    padding: 8px 0;
  }

  h3 {
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--sakura-color-divider);
  }

  h3,
  h4,
  h5 {
    padding-left: 16px;
  }

  :where(h2):not(:where(.not-prose, .not-prose *)) {
    &::after {
      content: '\00B6';
      position: absolute;
      color: oklch(71.45% 0.1788 22.7);
      font-family: 'Merriweather Sans', Helvetica, Tahoma, Arial, 'PingFang SC',
        'Hiragino Sans GB', 'Microsoft Yahei', 'WenQuanYi Micro Hei', sans-serif;
      padding-left: 6px;
      font-size: 1.03em;
    }
  }

  .serif h2::after {
    content: '\00B6';
    position: absolute;
    color: var(--sakura-color-primary);
    font-family: 'Merriweather Sans', Helvetica, Tahoma, Arial, 'PingFang SC',
      'Hiragino Sans GB', 'Microsoft Yahei', 'WenQuanYi Micro Hei', sans-serif;
    padding-left: 6px;
    font-size: 1.13em;
  }

  h3::after {
    content: '#';
    left: 0;
    position: absolute;
    color: var(--sakura-color-primary);
  }

  h4::after {
    content: '▌';
    left: 0;
    position: absolute;
    color: var(--sakura-color-primary);
  }

  h5::after {
    content: '♯';
    left: 0;
    position: absolute;
    color: var(--sakura-color-primary);
  }

  h1.entry-title {
    font-size: 24px;
    font-weight: 300;
  }

  .entry-header h1.entry-title {
    margin: auto;
    text-align: center;
    font-weight: 700;
    text-transform: uppercase;
  }

  hr {
    margin-top: 40px;
    margin-bottom: 40px;
    display: block;
    border: 0;
    text-align: center;
    background: 0 0;
  }

  hr::before {
    content: '...';
    display: inline-block;
    margin-left: 0.6em;
    color: oklch(0% 0 0 / 80%);
    position: relative;
    top: -30px;
    font-size: 28px;
    letter-spacing: 0.6em;
  }

  code {
    word-break: break-word;
    font-family: 'Source Code Pro', monospace, Helvetica, Tahoma, Arial,
      STXihei, 'STHeiti Light', 'Microsoft YaHei', sans-serif;
    padding: 2px;
    text-shadow: none;
    border-radius: 5px;
  }
}