@import 'anchor';
@import 'colors';

#post {
  > #toc {
    margin: 0 0 2em 2em;
    padding: 1em;
    width: fit-content;
    border: 4px solid $yellow;
    border-top: none;
    float: right;
    background-color: $background;

    > h2 {
      padding: 0.2em 0;
    }

    > ul {
      list-style-type: none;

      > li {
        margin: 0.2em 0;

        > a {
          font-size: 1.25em;
        }

        &:before {
          content: '>';
          padding-right: 0.5em;
        }

        > ul {
          list-style-type: none;

          > li {
            margin: 0.2em 0;

            > a {
              font-size: 1.25em;
            }

            &:before {
              content: '>>';
              padding-right: 0.5em;
              padding-left: 0.5em;
            }
          }
        }
      }
    }
  }

  > *:not(#toc) {
    padding: 1em 1em;
    background-color: rgba(0, 0, 0, 0.25);

    p, ol, ul {
      padding: 0.2em 0;
    }

    details {
      display: inline-block;
      border-bottom: 4px solid $comment;
    }

    summary {
      color: $comment;
      cursor: pointer;
      outline: none;
    }

    h2 {
      padding: 2px 0;
      margin: 0.2em 0;
      border-bottom: 4px solid $orange;
      width: 50%;
    }

    h3 {
      font-size: 1.3em;
      padding: 2px 0;
      margin: 1em 0 0.4em 0;
      border-bottom: 4px solid $red;
      width: 25%;
    }

    p {
      font-size: 1.1em;
      text-align: justify;
    }

    ol, ul {
      font-size: 1.1em;
      margin-bottom: 0.2em;

      > li {
        padding-bottom: 0.1em;
      }
    }

    ol {
      padding-left: 1.5em;
    }

    ul {
      list-style-type: none;

      > li:before {
        content: '>';
        padding-left: 0.5em;
        padding-right: 0.5em;
      }
    }

    table {
      width: 100%;
      font-size: 1.1em;
      margin: 0.4em 0;
      border-bottom: 2px solid $comment;
      border-spacing: 0;

      > thead {
        font-size: 1.3em;
        font-weight: bold;

        > tr > td {
          padding: 0.5em 0.8em;
          background-color: $selection;
          border-bottom: 2px solid $comment;
        }
      }

      > tbody {
        > tr {
          > td {
            padding: 0.5em 0.8em;
            border-left: 2px solid $comment;
            
            &:last-child {
              border-right: 2px solid $comment;
            }
          }

          &:nth-child(even) > td {
            background-color: $selection;
          }

          &:nth-child(odd) > td {
            background-color: $background;
          }
        }
      }
    }
  }
}

@import 'responsive'
