.wiki.wiki-page {
  margin-bottom: $line-height-computed;
  font-size: $wiki-font-size;

  @if $wiki-page-more-vertical-space {
    // Add some space between list items
    ul,
    ol {
      li {
        margin-top: .25em;
      }

      ul,
      ol {
        margin-top: .25em;
        margin-bottom: .25em;

        li {
          margin-top: .125em;
        }
      }
    }
  }
}

.controller-wiki {
  .wiki > .preview,
  .wiki.wiki-preview {
    font-size: $wiki-font-size;
  }
}

div.wiki {
  color: $wiki-text;
  line-height: $wiki-line-height;

  // stylelint-disable selector-list-comma-newline-after
  h1, .h1,
  h2, .h2,
  h3, .h3,
  h4, .h4,
  h5, .h5,
  h6, .h6 {
    margin-top: 1em;
    margin-bottom: $wiki-font-size;
    font-weight: $headings-font-weight;
    line-height: $headings-line-height;
  }

  h1, .h1 {
    padding-bottom: .3em;
    border-bottom: 1px solid $gray-400;
    font-size: $font-size-h1;
    line-height: 1.2;
  }

  h2, .h2 {
    padding-bottom: .3em;
    border-bottom: 1px solid $gray-400;
    font-size: $font-size-h2;
    line-height: 1.225;
  }

  h3, .h3 {
    font-size: $font-size-h3;
    line-height: 1.43;
  }

  h4, .h4 {
    font-size: $font-size-h4;
  }

  h5, .h5 {
    font-size: $font-size-h5;
  }

  h6, .h6 {
    color: $gray-700;
    font-size: $font-size-h6;
  }

  .text-normal {
    font-weight: $font-weight-normal;
  }

  > a:first-child {
    + h1,
    + h2,
    + h3,
    + h4,
    + h5,
    + h6 {
      margin-top: 0;
    }
  }

  > a:target {
    + h2,
    + h3,
    + h4,
    + h5,
    + h6 {
      &::before {
        content: "#";
        display: inline-block;
        width: .7em;
        margin-left: -.7em;
        color: $headings-anchor-color-active;
        font-weight: $font-weight-normal;
      }
    }
  }

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

  blockquote {
    margin-bottom: 1em;

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

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

  .contextual {
    a {
      opacity: $icon-opacity;

      &:hover {
        opacity: $icon-hover-opacity;
      }
    }
  }

  a {
    word-break: break-all;
    word-break: break-word;
  }

  p,
  ul,
  ol {
    margin-bottom: 1em;
  }

  ul,
  ol {
    padding-left: 1.5em;

    ul,
    ol {
      margin-bottom: 0;
    }
  }

  li > p {
    margin-top: .25em;
    margin-bottom: 0;
  }

  table {
    display: block;
    width: 100%;
    margin-bottom: $line-height-computed;
    overflow: auto;
    word-break: normal;
    word-break: keep-all;
  }

  // Textile
  tbody:first-child tr:nth-child(2n),
  // Markdown
  thead + tbody tr:nth-child(2n-1) {
    background-color: $table-bg-accent;
  }

  td,
  th {
    padding: $table-cell-padding;
    border: 1px solid $table-border-color;
  }

  .noborder,
  .wiki-class-noborder {
    border: 0 none;

    td,
    th {
      border: 0 none;
    }
  }

  a.new {
    color: $brand-danger;
  }

  code {
    padding: .2em .33em;
    border-radius: $border-radius-base;
    background-color: rgba($gray-500, .3);
    font-size: $font-size-small;
  }

  pre {
    width: auto;
    margin-bottom: 1.15em;
    padding: 12px 15px;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: $border-radius-base;
    background-color: rgba($gray-500, .15);
    font-size: $font-size-small;

    code {
      padding: 0;
      border-radius: 0;
      background-color: transparent;
      font-size: 1em;
    }
  }

  img {
    max-width: 100%;
    vertical-align: middle;
  }

  .toc {
    display: table;
    max-width: 45%;
    margin-bottom: $line-height-computed;
    margin-left: 0;
    padding: $padding-small-vertical $padding-small-horizontal;
    list-style-type: none;
    border: 1px solid $toc-border;
    border-radius: $border-radius-base;
    background-color: $toc-bg;
    box-shadow: $toc-shadow;
    color: $toc-text;
    font-size: $font-size-small;

    a {
      color: $toc-link;
      font-weight: $font-weight-normal;
      text-decoration: none;

      &:hover {
        color: $toc-link-hover;
        text-decoration: underline;
      }
    }

    &.right {
      margin-right: 0;
      margin-left: $line-height-computed;
      float: right;
    }

    &.left {
      margin-right: $line-height-computed;
      margin-left: 0;
      float: left;
    }

    ul {
      margin: 0;
      padding: 0;
      font-size: $font-size-small;

      ul {
        font-size: 1em;
      }
    }

    li {
      // stylelint-disable selector-max-compound-selectors
      margin: 0;

      li {
        margin-left: 1.5em;
        list-style-type: disc;

        li {
          list-style-type: circle;

          li {
            list-style-type: square;
          }
        }
      }
    }
  }

  .toc-active-prev + .toc {
    padding-left: $padding-large-horizontal;
    border-left: 4px solid $toc-active-border;

    a {
      color: $toc-active-link;

      &:focus,
      &:hover {
        color: $toc-active-link-hover;
      }
    }
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  .wiki-anchor {
    display: none;
    margin-left: 5px;
    color: $headings-anchor-color !important; // stylelint-disable-line declaration-no-important
    text-decoration: none !important; // stylelint-disable-line declaration-no-important
  }

  &:hover {
    .wiki-anchor {
      display: inline;
    }
  }

  img {
    display: inline-block;
    max-width: 100%;
    vertical-align: middle;
  }
}

p.footnote {
  margin-bottom: 5px;

  &::before {
    content: "";
    display: block;
    width: 300px;
    margin-top: $line-height-computed;
    padding-top: $line-height-computed / 2;
    border-top: 1px solid $gray-400;
  }

  + p.footnote::before {
    display: none;
  }
}

.ltr,
.wiki-class-ltr {
  direction: ltr;
}

.rtl,
.wiki-class-rtl {
  direction: rtl;
}

.preview {
  margin-top: $line-height-computed;
  padding: $padding-wiki;
  border: 1px solid $gray-400;
  background-color: $body-bg;
}

#wiki_add_attachment {
  padding-top: $line-height-computed;
  border-top: 1px solid $gray-400;

  > p {
    margin-bottom: 0;
    float: left;
  }

  > form {
    padding-top: $line-height-computed;
    clear: left;
  }

  .collapsible & {
    padding-top: 0;
    border-top: 0;

    > form {
      padding-top: 0;
    }
  }
}


//
// Custom classes for Bootstrap-like features
// --------------------------------------------------


// Pager
// see: http://getbootstrap.com/components/#pagination-pager

.wiki-pager {
  > a {
    display: inline-block;
    padding: $padding-base-vertical $padding-base-horizontal;
    border: 1px solid $btn-default-border;
    border-radius: ceil($font-size-base + ($padding-base-vertical + 1px) * 2) / 2;
    background-color: $body-bg;
    line-height: 1;
    white-space: nowrap;

    &:hover,
    &:focus,
    &:active {
      background-color: $btn-default-bg;
      text-decoration: none;
    }
  }

  &.wiki-pager--aligned {
    overflow: hidden;

    > a:first-child {
      float: left;
    }

    > a:last-child {
      float: right;
    }
  }
}


//== Typographic helper classes
//

// Lead body copy
// see: http://getbootstrap.com/css/#lead-body-copy

.lead {
  margin-bottom: $line-height-computed;
  font-size: floor(($font-size-base * 1.15));
  font-weight: 300;
  line-height: 1.4;

  @media (min-width: $screen-sm-min) {
    font-size: ($font-size-base * 1.5);
  }
}


// Alignment
// see: http://getbootstrap.com/css/#type-alignment

.text-left       { text-align: left; }
.text-right      { text-align: right; }
.text-center     { text-align: center; }
.text-justify    { text-align: justify; }
.text-nowrap     { white-space: nowrap; }


// Transformation
// see: http://getbootstrap.com/css/#type-transformation

.text-lowercase  { text-transform: lowercase; }
.text-uppercase  { text-transform: uppercase; }
.text-capitalize { text-transform: capitalize; }


// Other helper classes
// see: http://getbootstrap.com/css/#helper-classes

.text-muted      { color: $gray-600; }
.text-primary    { color: $brand-primary; }
.text-success    { color: $brand-success; }
.text-info       { color: $brand-info; }
.text-warning    { color: $brand-warning; }
.text-danger     { color: $brand-danger; }

.bg-primary      { background-color: $brand-primary; color: $brand-text; }
.bg-success      { background-color: $state-success; }
.bg-info         { background-color: $state-info; }
.bg-warning      { background-color: $state-warning; }
.bg-danger       { background-color: $state-danger; }

p {
  &.bg-primary,
  &.bg-success,
  &.bg-info,
  &.bg-warning,
  &.bg-danger {
    padding: $panel-body-padding;
  }
}
