@layer foundation {
  /* SVG icons (Material Symbols replacement for Metro icon font) */
  .svg-icon {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-right: 0.1875rem;
  }

  .svg-icon svg {
    width: 1.2em;
    height: 1.2em;
    fill: currentColor;
  }

  nav.breadcrumbs {
    padding-top: 0;
  }

  .content {
    padding: 20px;
    margin: 0 -20px;
    border-radius: 0 0 4px 4px;
  }

  /* Diff viewer */
  .diff {
    overflow: auto;
  }

  .diff ul {
    background: #fff;
    overflow: auto;
    font-size: 13px;
    list-style: none;
    margin: 0;
    padding: 0;
    display: table;
    width: 100%;
  }

  .diff del,
  .diff ins {
    display: block;
    text-decoration: none;
  }

  .diff li {
    padding: 0;
    display: table-row;
    margin: 0;
    height: 1em;
  }

  .diff li.ins {
    background: #dfd;
    color: #080;
  }

  .diff li.del {
    background: #fee;
    color: #b00;
  }

  .diff li:hover {
    background: #ffc;
  }

  .diff del,
  .diff ins,
  .diff span {
    white-space: pre-wrap;
    font-family: courier;
  }

  .diff del strong {
    font-weight: normal;
    background: #fcc;
  }

  .diff ins strong {
    font-weight: normal;
    background: #9f9;
  }

  .diff li.diff-comment {
    display: none;
  }

  .diff li.diff-block-info {
    background: none repeat scroll 0 0 gray;
  }

  /* Version badge */
  .version {
    float: right;
    color: #cecede;
    font-size: 0.8em;
  }

  /* Dropdown */
  .dropdown-toggle {
    cursor: pointer;
  }

  /* Pagination */
  nav.pagination {
    margin: 1.25rem 0;
  }

  nav.pagination ul {
    display: flex;
    gap: 0.15625rem;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  nav.pagination li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 5px;
    border: 1px solid var(--neutral-200);
    border-radius: 4px;
    text-decoration: none;
    color: var(--neutral-700);
    font-size: 14px;
  }

  nav.pagination li a:hover {
    background-color: var(--neutral-100);
    border-color: var(--neutral-300);
  }

  nav.pagination li.active a {
    background-color: var(--primary-500);
    border-color: var(--primary-500);
    color: #fff;
  }

  nav.pagination li.gap a {
    border: none;
    pointer-events: none;
  }

  /* Sidebar */
  span.sidebar-counter {
    margin-left: 4px;
  }
}