@import "variables";

// .posts {
//   margin: 0 auto;
// }

.post {
  width: 100%;
  text-align: left;
  margin: 20px auto;
  padding: 20px 0;

  @media (max-width: $tablet-max-width) {
    max-width: 660px;
  }

  &:not(:last-of-type) {
    border-bottom: 1px solid var(--border-color);
  }

  // %meta {
  //   font-size: 1rem;
  //   margin-bottom: 10px;
  //   color: var(--accent-alpha-70);
  // }

  // &-meta {
  //   @extend %meta;
  // }
  // &-meta-inline {
  //   @extend %meta;

  //   display: inline;
  // }

  &-meta {
    font-size: 1rem;
    margin-bottom: 10px;
    color: var(--accent-alpha-70);
  }

  &-title {
    --border: 3px dotted var(--accent);
    position: relative;
    color: var(--accent);
    margin: 0 0 15px;
    padding-bottom: 15px;
    border-bottom: var(--border);

    &:after {
      content: '';
      position: absolute;
      bottom: 2px;
      display: block;
      width: 100%;
      border-bottom: var(--border);
    }
    
    a {
      text-decoration: none;
    }
  }

  &-content {
    margin-top: 30px;
  }

  ul {
    list-style: none;

    li:before {
      content: '⦿';
      position: absolute;
      left: -20px;
      color: var(--accent);
    }
    ul {

      li:before {
        content: '■';
        position: absolute;
        left: -20px;
        color: var(--accent);
      }

      ul {

        li:before {
          content: '►';
          position: absolute;
          left: -20px;
          color: var(--accent);
        }
      }
    }
  }
}

// TODO: try adapting this using a properly nested selector in the block above
//       for ul items.
.tag-list {
    @media(max-width: $phone-max-width) {
        margin-left: 5%;
    }
}

.footnote-definition {
  color: var(--accent);

  p {
    display: inline;
    color: var(--footnote-color);
  }
}
