main {
  &.api {
    section {
      header {
        .content {
          padding: ($whitespace * 2) $whitespace 0;

          h1 {
            @include font-medium;

            color: $light;
            font-size: 24px;
            margin: 0 0 $whitespace;
          }

          p {
            color: $text;
            font-size: 16px;
            margin: 0 0 $whitespace;
          }

          ul {
            margin: ($whitespace * .5) 0 ($whitespace * 2);
            padding: 0;

            li {
              list-style: none;

              small {
                @include font-light;

                color: $alt;
                display: inline-block;
                font-size: .75em;
                margin: 0 0 ($whitespace * .5);
                text-transform: uppercase;
              }

              a {
                color: $light;
                display: inline-block;
                margin: 0 0 ($whitespace * .25) ($whitespace * .5);
                transition: color $transition-duration $transition-timing-function;

                &:hover,
                &:focus {
                  color: $alt;
                }
              }
            }
          }
        }
      }

      :not(pre) {
        > code {
          font-size: .85em;

          &.key {
            background: $footer;
            font-size: .95em;
          }
        }
      }

      .content {
        padding: 0 $whitespace $whitespace;

        h2 {
          @include font-medium;

          color: $light;
          margin: ($whitespace * 2) 0 $whitespace;
        }

        .doc {
          p {
            color: $text;
            margin: ($whitespace * .5) 0;

            + h3 {
              margin: ($whitespace * 1.5) 0 ($whitespace * .5);
            }

            a {
              @include primary-link;

              text-decoration: underline;
            }
          }

          h3 {
            @include font-regular;

            color: $light;
            margin: ($whitespace * .5) 0;
          }

          table {
            code {
              word-break: initial;
            }

            th {
              @include font-light;

              color: $alt;
              font-size: .75em;
              padding: 0 ($whitespace * .25) ($whitespace * .5);
              text-align: left;
              text-transform: uppercase;
            }

            td {
              padding: ($whitespace * .25);
              vertical-align: top;

              p {
                &:first-child {
                  margin-top: 0;
                }
              }
            }
          }

          .callout {
            align-items: center;
            background: rgba($primary, .9);
            border-radius: .5em;
            display: flex;
            flex-flow: row nowrap;
            margin: 2em 0;
            padding: 1em;

            > * {
              margin: 0 .5em;
            }

            .icon {
              color: $white;
              font-size: 2.25em;
            }

            p {
              @include font-medium;

              color: $banner;

              a {
                color: $white;

                &:hover,
                &:focus {
                  color: $banner;
                }
              }
            }
          }
        }
      }
    }
  }
}
