/**
 * ABlog
 * ref: https://ablog.readthedocs.io/
 */

/**
 * Sidebar template components
 */
.ablog-sidebar-item {
  h2,
  h3 {
    font-size: var(--pst-sidebar-header-font-size);

    // Remove unnecessary vertical whitespace
    margin-top: 0.5rem;

    // The headers are all links, but this makes them hard to parse
    // So we change the colors to make them look like headers
    a {
      color: var(--pst-color-text-base);
    }
  }

  ul {
    // No bullet points for the primary sidebar items
    list-style: none;
    padding-left: 0;

    // Otherwise a scrollbar randomly shows up
    overflow-y: hidden;

    // List of recent post items
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    margin-bottom: 0;

    // The ablog cloud should move horizontally
    &.ablog-cloud {
      flex-flow: row wrap;
      gap: 0.5rem;

      // Vertical-align tag clouds
      li {
        // Center the tag cloud items
        display: flex;
        align-items: center;
      }
    }
  }
}

/**
 * Previous / next buttons at the bottom
 */
.ablog__prev-next {
  font-size: 1.2em;
  display: flex;
  padding: 1rem 0;

  // The bottom previous / next arrows
  > span {
    // To ensure that the whole thing fits on one line even if there are long titles
    display: flex;
    max-width: 45%;

    // Links within each span have the collection of icon + text
    a {
      display: flex;
      align-items: center;
      margin-left: auto;
      gap: 1rem;
      line-height: 1.5rem;

      i::before {
        color: var(--pst-color-text-base);
      }
    }
  }

  // The first span is for the previous page and aligns to the left
  span.ablog__prev {
    i.fa-arrow-circle-left::before {
      content: var(--pst-icon-angle-left);
    }
  }

  // The second span is just an empty space so we remove it because we're
  // positioning with flex
  span.ablog__spacer {
    display: none;
  }

  // The third span is aligned to the right
  span.ablog__next {
    margin-left: auto;
    text-align: right;

    i.fa-arrow-circle-right::before {
      content: var(--pst-icon-angle-right);
    }
  }
}

/**
 * {postlist} directive and posts page
 */
.ablog__collection,
.postlist {
  padding-left: 0;

  .ablog-post {
    list-style: none;

    // Post metadata tags (author, links ,etc) should be a bit smaller
    .ablog-archive {
      display: flex;
      flex-flow: row wrap;
      gap: 1rem;
      list-style: none;
      font-size: 0.75rem;
      padding-left: 0;
    }

    // Title line should be a bit bigger and bold to stand out
    .ablog-post-title {
      margin-top: 0;
      font-size: 1.25rem;

      a {
        font-weight: bold;
      }
    }

    // Read more button should be a bit bigger
    .ablog-post-expand {
      margin-bottom: 0.5rem;
    }
  }
}
