.__slate {
  width: 100%;
  height: 100%;
  position: relative;

  &::after {
    @include clearfix;
  }
}

.api-header {
  padding: 2rem;
  position: relative;

  &::after {
    width: 100%; height: 1px;
    bottom: -1px; left: 0;

    background-color: $lbry-gray-2;
    content: "";
    position: absolute;
  }
}

.api-toc {
  width: 200px; height: calc(100vh - 4rem); // navigation is 4rem tall
  bottom: 0;

  background-color: $lbry-white;
  border-right: 1px solid $lbry-gray-1;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  z-index: 3;

  @media (min-width: 801px) {
    left: 0;
  }

  @media (max-width: 800px) {
    height: calc(100% - 4rem);
    top: 4rem;
    padding-top: 3.5rem;
    transition: left 0.2s;

    -webkit-overflow-scrolling: touch;

    &:not(.active) {
      left: -200px;
    }

    &.active {
      left: 0;
    }
  }
}

.api-toc__select,
.api-toc__search-field {
  width: 100%;

  border-top: none;
  border-right: none;
  border-bottom: 1px solid $lbry-gray-1;
  border-left: none;
}

.api-toc__select {
  background-position-x: 95%;
}

.api-toc__search {
  position: relative;
}

.api-toc__search-field {
  padding: 0.25rem calc(2rem + 4px) 0.25rem 0.75rem;

  border-radius: 0; // TODO: Put this rule in components on inputs
  font-size: 0.8rem;
  line-height: 2rem;
}

.api-toc__search-clear {
  width: 1.25rem; height: 1.25rem;
  top: 0.6rem; right: 0.75rem;

  background-color: $lbry-black;
  border-radius: 50%;
  color: $lbry-white;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1.15;
  position: absolute;
  text-align: center;
  transition: opacity 0.2s;

  &:not(.active) {
    opacity: 0;
    visibility: hidden;
  }

  &.active {
    opacity: 1;
    visibility: visible;
  }
}

.api-toc__title {
  padding: 0.25rem 0.5rem 0.25rem 0.75rem;
  opacity: 0.3;
  pointer-events: none;
  text-transform: uppercase;
}

.api-toc__commands {
  font-size: 0.8rem;
  line-height: 1.33;
  list-style-type: none;
  padding-top: 0.25rem;
  padding-bottom: 1rem;
}

.api-toc__command {
  &:hover {
    background-color: $lbry-gray-2;
  }

  a {
    padding: 0.25rem 0.5rem 0.25rem 0.75rem;
    display: block;
  }
}

.api-content {
  @media (min-width: 801px) {
    width: calc(100% - 200px);
    float: right;
  }
}

.api-documentation {
  display: grid;

  @media (min-width: 1201px) {
    grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
  }

  @media (max-width: 1200px) {
    grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));

    div {
      &:empty {
        display: none;
      }
    }
  }

  h1 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
  }

  h2 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
  }

  h3 {
    font-size: 0.8rem;
    letter-spacing: 0.1rem;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
  }

  p,
  ol,
  ul {
    line-height: 1.5;
    margin-bottom: 1rem;
  }

  ol,
  ul {
    @media (min-width: 801px) {
      font-size: 1rem;
    }

    @media (max-width: 800px) {
      font-size: 0.8rem;
    }
  }

  p {
    font-size: 1rem;
  }

  pre {
    font-size: 0.8rem;
  }

  table {
    width: 100%;

    border: 1px solid rgba($lbry-white, 0.1);
    border-radius: 0.3rem;
    border-spacing: 0;
    font-size: 0.8rem;
    line-height: 1.33;
  }

  thead {
    display: none;
  }

  th,
  td {
    padding: 0.5rem 1rem 0.5rem 0.5rem;
  }

  th {
    border-bottom: 1px solid rgba($lbry-white, 0.1);
  }

  tr:nth-child(even) {
    background-color: rgba($lbry-white, 0.1);
  }
}

.api-content__body {
  padding: 2rem;
  border-bottom: 1px solid $lbry-gray-1;

  a {
    transition: color 0.2s;

    &:not(:hover) {
      color: $lbry-teal-3;
    }

    &:hover {
      color: $lbry-teal-5;
    }
  }
}

.api-content__body-arguments {
  border: 1px solid $lbry-gray-2;
  border-radius: 3px;
  list-style-type: none;
}

.api-content__body-argument {
  display: flex;

  &:not(:last-of-type) {
    border-bottom: 1px solid $lbry-gray-2;
  }

  &:nth-child(even) {
    background-color: rgba($lbry-gray-1, 0.2);
  }

  .left,
  .right {
    padding: 0.5rem 0.75rem;
  }

  .left {
    width: 30%;
    float: left;
    word-wrap: break-word;

    @media (min-width: 801px) {
      border-right: 1px solid $lbry-gray-2;
    }

    span {
      color: $lbry-gray-3;
      font-size: 0.8rem;

      &:not(:first-of-type) {
        margin-left: 0.5rem;
      }
    }
  }

  .right {
    width: 70%;
    float: right;
    word-wrap: break-word;
  }

  &::after {
    @include clearfix;
  }
}

.api-content__example,
.api-content__intro {
  padding: 2rem;
  background-color: rgba($lbry-black, 0.9);
  border-bottom: 1px solid rgba($lbry-white, 0.1);
  color: $lbry-white;
  position: relative;

  pre {
    background-color: $lbry-black;
  }
}



.api-content__items {
  width: 100%;
  padding: 1rem 2rem;
  top: 4rem; right: 0;

  background-color: $lbry-black;
  color: $lbry-white;
  position: sticky;
  z-index: 10;

  // GOOD OL' SAFARI
  position: -webkit-sticky; // sass-lint:disable-line no-duplicate-properties
}

.api-content__item {
  padding: 0.25rem 0.75rem;
  border-radius: 0.2rem;
  display: inline-block;
  font-size: 0.8rem;
  transition: background-color 0.2s;

  &.menu {
    @media (min-width: 801px) {
      display: none;
    }
  }

  &:not(:last-of-type) {
    margin-right: 0.5rem;
  }

  &:not(:hover) {
    background-color: $lbry-gray-5;
  }

  &.active,
  &:hover {
    background-color: $lbry-teal-4;
  }
}

pre {
  &[data-api-example-type] {
    &:not(.active) {
      display: none;
    }
  }
}