/**
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
@media screen and (min-width: 769px) {
  .rest-api-container, .docs-container {
    article {
      padding: 0 2%;
      margin-bottom: 2rem;
    }
  }
}


.rest-api-container, .docs-container {
  blockquote {
    border: 1px solid $sx-light-gray;
    background-color: lighten($sx-light-gray, 20%);
    padding: 0.75rem;
  }

  h4 + ul {
    margin-top: 1rem;
  }

  ul ul {
    margin: 8px 0;
  }

  article {
    section.docs-header {
      margin-bottom: 35px;
      //border: 1px solid blue;

      .tags {
        margin-top: 20px;

        button {
          padding: 4px 8px;
          font-size: 14px;
        }
      }

      h1.docs-title {
        font-size: 40px;
        line-height: 3.2rem;

        .badge {
          margin-left: .75rem;
        }
      }

      span.docs-lead {
        margin: 20px 0 0 0;
        font-size: 16px;
        font-weight: lighter;
      }

      .tag-group {
        margin-top: 20px;

        button.tag-btn {

        }
      }
    }

    section.content {
      font-size: 1rem;

      li {
        margin-left: 22px;
        font-size: 100%;
      }

      h3 + h4 {
        margin-top: 20px;
      }

      h2:not(.cli-command-title) {
        margin-top: 35px;
      }

      h3:not(.cli-command-title) {
        margin-top: 35px;
      }

      a:hover {
        text-decoration: none;
      }

      h2, h3, h4, h5, h6 {
        & + p {
          margin-top: 15px;
        }
      }

      .topic, .fqfn {
        color: $sx-light-gray;
        background-color: $black;
        font-size: $code-font-size * 1.25;
        font-family: $font-family-monospace;
        font-weight: 700;
        padding: .5rem 0 .5rem 1rem;
        border-radius: 0;

        .property, .tenant { color: $sx-olive; }
        .cluster, .name { color: $sx-red; }
        .namespace { color: $sx-7; }
        .t { color: $sx-magenta; }

        & ~ {
          p, h2, h3, h4, h5 {
            margin-top: 20px;
          }
        }
      }

      .highlighter-rouge {
        font-family: $font-family-monospace;
        margin: .75rem 0;

        .highlight {
          margin: 0;
          padding: 1rem;

          pre.highlight {
            margin: 0;
            padding: 0;

            code {
              margin: 0;
              padding: 0;
              font-size: $code-font-size;
            }
          }
        }
      }

      code.highlighter-rouge {
        color: $pulsar-blue;
        //padding: .2rem .3rem;
        background-color: lighten($sx-light-gray, 22%);
        border-radius: 0;
      }

      em {
        margin-right: 2px;
      }

      figure {
          margin: 2rem 0;

          img {
            display: block;
            max-width: 100%;
            margin: 0 auto;
          }

          figcaption {
            text-align: center;
            margin-top: 1rem;
            font-size: 1.5rem;
            font-weight: 500;
          }
        }


      p img {
        display: block;
        margin: 20px auto;
        max-width: 100%;

        &[alt="Maven Central"] {
          width: 20%;
          margin: 0;
          padding: 0;
        }
      }

      img.inline {
        margin: initial;
        width: initial;
      }

      p {
        font-size: $docs-font-size;
      }

      h2, h3 {
        & + p {
          margin-top: 20px;
        }
      }

      table {
        margin: 25px 0;
        width: 100%;

        thead {
          font-size: 16px;
          border-bottom: 1px solid black;

          tr th {
            padding: 0 $table-right-padding .5rem 0;
          }
        }

        tbody {
          tr {
            td {
              padding: 5px $table-right-padding 5px 0;
              overflow-x: scroll;

              code {
                font-size: inherit;
              }

              em {
                font-size: 12px;
                font-style: normal;
              }
            }

            & + tr {
              border-top: 1px solid #ddd;
              margin-top: 10px;
            }
          }
        }

        &.config {
          overflow-x: scroll;
          width: 100%;

          thead {
            tr {
              th {
                &:nth-child(2), &:nth-child(3)  {
                  padding-left: 10px;
                }
              }
            }
          }

          td, td p {
            font-size: 12px;
          }

          td {
            padding: 5px 0;

            &:nth-child(1), &:nth-child(2) {
              overflow: auto;
            }

            &:nth-child(2), &:nth-child(3)  {
              padding-left: 10px;
            }

            & + td {
              border-left: 1px solid #ddd;
            }
          }
        }

        &.env-var {
          th {
            &:first-child {
              min-width: 200px;
            }
          }
        }
      }
    }
  }
}
