body {
  // A way to switch between platform specific instructions in an article.
  //
  // No styleguide reference.
  div.document-content {
    div, span, kbd {
      &.platform-mac,
      &.platform-windows,
      &.platform-linux {
        display: none;
      }
    }
  }

  &.platform-switch {
    div.document-content {
      div, span, kbd {
        &.platform-all {
          display: inline;
        }
      }
    }
  }

  &.platform-switch.platform-mac div.document-content .platform-mac,
  &.platform-switch.platform-windows div.document-content .platform-windows,
  &.platform-switch.platform-linux div.document-content .platform-linux,
  &.platform-switch.platform-all div.document-content .platform-all {
    display: inline;
  }
}

#platform-nav {
  display: none;
  text-align: right;
  text-transform: uppercase;

  &.show {
    display: inline-block;
  }

  ul {
    display: inline-block;
    margin: 0;
    padding: 0;
    font-size: 80%;
    list-style-type: none;

    li {
      display: inline-block;

      &.hidden {
        display: none;
      }

      a {
        margin: 0 .25em;
        padding: .15em 0;
        text-decoration: none;
      }

      &.selected a {
        color: $brownDark;
        border-bottom: 1px solid $border-color;
        cursor: default;
      }
    }
  }
}
