$foreground-color: #f8f8f2;
$background-color: #333333;

// create an arrow rotated by $angle
@mixin arrow($angle) {
  content: "";
  display: inline-block;
  position: fixed;
  // size
  padding: 3px;
  // position
  margin: 18px 15px;
  border: solid $background-color;
  border-width: 0 2px 2px 0;

  transform: rotate($angle);
  -webkit-transform: rotate($angle);
}

details {
  padding: 0rem 1rem !important;
  margin: 1rem;
  padding: 0 !important;
  width: 100%;

  > summary {
    padding: 0rem !important;
    margin: 0 !important;
    overflow-x: scroll;

    // do not show arrow bullet point
    list-style: none;
    ::-webkit-details-marker {
      display: none;
    }

    // replace builtin arrows with custom ones
    pre {
      margin: 0 !important;
      padding-left: 42px !important;
      vertical-align: middle;
    }
    &:before {
      @include arrow(-45deg);
    }
  }

  &[open] summary:before {
      @include arrow(45deg);
  }

  .table-container {
    overflow-x: scroll !important;
  }

  table {
    display: inline-table !important;
    // TODO: no idea where this extra pixel comes from
    width: calc(100% - 1px);
  }

  table, tbody {
    // fill entire width
    margin: 0 !important;

    tr {
      // make code blocks a little smaller
      pre {
        margin: 0 !important;
        padding: 0.2rem !important;

        &.highlight {
          color: $foreground-color;
          background-color: $background-color;
        };

        code {
          vertical-align: text-bottom;
          padding-left: 0.2rem !important;
        }
      }

      // field name
      td:first-child {
        font-weight: bold;
        font-size: 90%;

        width: 8em;
        min-width: 8em;
        max-width: 8em;
        word-break: break-all;
      }
    }
  }
}

aside.book-menu span {
  // make menu headers bold
  font-weight: bold;
}

.source {
  position: relative;
  .filename {
      position: absolute;
      right: 0px;
      margin: 0;
      line-height: 0;
      font-size: 0.8rem;
      background-color: transparent;
      color: #d8dee9;
  }
}

// directory listing on examples page
.listing {
  position: absolute;
  bottom: 10px;
}