.doc-page {

  > .header {
    height: 140px !important;
    min-height: 140px !important;
    max-height: 140px !important;
    padding: 24px !important;

    .reference-button {
      padding: 0 8px;
      min-width: 45px;

      span {
        margin-left: 4px;
      }
    }
  }

  > .content {
    max-width: 1200px;

    .description {
      margin-bottom: 32px;
    }

    .card {
      background: #FFFFFF;
      margin: 16px 0 48px 0;
      padding: 24px;

      .preview,
      .source-code {
        margin: 8px;
      }

      .preview {
        background: #F9FAFB;
        min-height: 90px;
        padding: 8px 16px;
      }

      .source-code {
        background: #F3F4F6;
        position: relative;

        [hljs], hljs {
          display: block;
          background-color: transparent;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
        }
      }
    }

    .attributes {
      margin: 16px 0 48px 0;
    }
  }
}

// RESPONSIVE
@media screen and (max-width: $layout-breakpoint-xs) {

  .doc-page {

    .source-code {
      min-height: 120px;
    }

    > .header {

      .reference-button {
        margin: 0;

        span {
          display: none;
        }
      }
    }

    .content {

      .ms-responsive-table-wrapper {

        table {

          tbody {

            td {

              &.description {
                min-width: 200px;
              }
            }
          }
        }
      }
    }
  }
}