/* Responsive Styles */

// By default the toc will be left of the content.
// You can add the `.toc-right` class to move it to the right side.

.toc-icon {
  position: fixed;
  top: 0;
  right: 0;
}

#toc:checked ~ .toc {
  box-shadow: 0 0 5px rgba(200, 200, 200, 1);
  transform: translateX(0);
}

// Responsive overrides.
.toc {
  background-color: hsla(200, 100%, 100%, 0.9);
  transform: translateX(-100%);

  &.toc-right {
    transform: translateX(100%);
    right: 0;
  }
}

// 52em
@media (min-width: 52em) {
  .toc {
    transform: translateX(0);

    &.toc-right {
      transform: translateX(0);
      right: calc((100% - 48rem - 4rem) / 2);
    }
  }

  .toc-icon {
    display: none;
  }

  .try-it-container {
    display: block;
  }

  .content {
    margin-left: 280px;
  }
  .toc-right ~ .content {
    margin-left: 0;
    margin-right: 280px;
  }
}