/*
 * Mixins
 */

%table-align-left {
  & tr th,
  & tr td,
  & tr td:last-child {
    text-align: left;
  }
}

%shortcut-span {
  font-size: 1rem;
  padding: 5px 6px;
  padding-left: 8px; /* compensation */
  background: var(--bg-gray);
  border-bottom: solid 1px var(--dark-line-color);
  border-radius: 3px;
  margin-right: 2px;
  letter-spacing: 0.05em;
  color: var(--text-body);
  position: relative;
  top: -1px;
}

/*
 * Tables
 */

.MarkdownBody table {
  & {
    width: 100%;
  }

  & tr + tr {
    border-top: solid 1px var(--line-color);
  }

  & tr.separator > td {
    height: 3px;
    overflow: hidden;
    border-top: solid 1px var(--dark-line-color);
    background: var(--line-color);
    padding: 0;
  }

  /* Horizontal lines */
  & tbody + tbody {
    border-top: solid 1px var(--line-color);
  }

  & td,
  & th {
    padding: 8px 16px;
    vertical-align: top;
    text-align: left;
  }

  & tr th:last-child,
  & tr td:last-child {
    text-align: right;
  }

  & td:first-child {
    white-space: nowrap;
  }

  & td > code {
    font-size: var(--code-size);
  }

  & td:first-child > code {
    color: #35a;
  }

  & a,
  & a:visited {
    color: #35a;
    text-decoration: none;
  }

  & td:first-child > code ~ em {
    @extend %ms-font-size--1;
    font-style: normal;
    color: var(--text-mute);
  }

  & thead {
    display: none;
  }

  & thead th {
    font-weight: normal;
    color: var(--brand-a);
  }
}

.MarkdownBody table.-shortcuts {
  & td:first-child > code {
    @extend %shortcut-span;
  }
}

.MarkdownBody table.-shortcuts-right {
  & td:last-child > code {
    @extend %shortcut-span;
  }
}

.MarkdownBody table.-left-align {
  @extend %table-align-left;
}

.MarkdownBody table.-headers {
  & thead {
    display: table-header-group;
    border-bottom: solid 1px var(--dark-line-color);
  }
}

/*
 * Key-value pairs (like in css)
 */

.MarkdownBody table.-key-values {
  & tbody tr td + td code {
    display: block;
  }
}

.MarkdownBody table.-css-breakdown {
  @include table-align-left;

  & tr td {
    @extend %ms-font-size-1;
    white-space: nowrap;
  }

  & tr td:not(:last-child) {
    padding-right: 4px;
  }

  & tr td:not(:first-child) {
    padding-left: 4px;
  }

  & tr:last-child {
    background: var(--bg-gray);
  }

  & tr:last-child td {
    @extend %ms-font-size--1;
    color: var(--text-mute);
    white-space: auto;
  }
}

.MarkdownBody table.-bold-first {
  & tr > td:first-child {
    font-weight: bold;
  }
}

.MarkdownBody table.-no-wrap {
  & td,
  & th {
    white-space: nowrap;
  }
}

.MarkdownBody table.-mute-em {
  & td,
  & th {
    & em {
      opacity: 0.5;
    }

    & em > code {
      margin-right: 0.5em;
    }
  }
}
