// Doc content
// -----------------------------------------------
// -----------------------------------------------
.site-doc {
  position: absolute;
  left: 290px;
  right: 0;
  top: 0;
  bottom: 0;
  transition: left $base-duration $base-timing;

  &.expanded {
    left: 0;
  }

  .doc-header {
    display: flex;
    align-items: center;
    height: ($base-point-grid * 11);
    padding: 0 ($base-point-grid * 5) 0 0;
    background: $white;

    .doc-toggle {
      transition: transform $base-duration $base-timing;

      &:hover {
        transform: scaleX(1.5);
      }

      > * {
        padding: ($base-point-grid * 2);
        margin: ($base-point-grid * 2);
      }
    }

    .link-container {
      display: flex;
      height: 100%;
      width: 100%;
      justify-content: flex-end;
      align-items: center;

      .strong {
        font-weight: 600;
      }

      .link-item {
        margin-left: ($base-point-grid * 2);

        a:hover {
          text-decoration: none;
        }
      }
    }
  }

  .doc-content {
    padding: ($base-point-grid * 2) ($base-point-grid * 4);
  }

  h1 {
    font-size: 2.5rem;
    border-bottom: 1px solid $border-color;
  }

  h2 {
    font-size: 2rem;
    border-bottom: 1px solid $border-color;
  }

  h3 {
    font-size: 1.5rem;
  }

  h4 {
    font-size: 1.25rem;
  }

  h5 {
    font-size: 1.125rem;
  }

  h6 {
    font-size: 1rem;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: {
      top: ($base-point-grid * 3);
      bottom: ($base-point-grid * 2);
    }

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

  p {
    margin: ($base-point-grid * 2) 0;

    img {
      max-width: 100%;
    }
  }

  ol,
  ul {
    padding-left: ($base-point-grid * 4);
    margin-bottom: ($base-point-grid * 2);
  }

  ol li {
    list-style: decimal;
  }

  ul li {
    list-style: disc;
  }

  .header-link {
    position: absolute;
    font-size: 0.6em;
    left: -2em;
    top: -0.15em;
    opacity: 0;
    padding: 0.8em;
    outline: none;
    transform: rotate3d(0, 0, 1, 45deg) scale3d(0.5, 0.5, 0.5);
    transition: opacity 0.2s ease, transform 0.2s ease;

    &:hover,
    &:focus,
    &:active {
      text-decoration: none;
    }
  }

  h1:hover,
  h2:hover,
  h3:hover,
  h4:hover,
  h5:hover,
  h6:hover {
    .header-link {
      opacity: 1;
      transform: rotate3d(0, 0, 1, 45deg) scale3d(1, 1, 1);
    }
  }
}

// Responsive
// -----------------------------------------------
@include bp(medium) {
  .site-doc {
    left: 0;

    &.expanded {
      overflow: hidden;
    }
  }
}
