_glyph-inspector.scss

#glyph-detail {
  .sidebar-header {
    background: #101010;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    padding: 0.5rem 1rem;

    a {
      color: #FFF;
      display: block;
      font: 600 var(--ms0)/1rem var(--ui-face);
      padding: 0.5rem 0;

      span {
        font-size: var(--ms1);
        font-weight: 700;
        line-height: 1rem;
        margin-right: 0.1em;
      }
    }
  }

  #glyph-detail-canvas {
    background: #fff;
    border-bottom: 1px solid #efefef;
  }

  #glyph-info {
    background: #fff;
    padding: 1rem 1rem 0.5rem 1rem;

    h3 {
      font: 700 var(--ms0)/1rem var(--ui-face);
      text-transform: uppercase;
    }

    p {
      font: 500 var(--ms0)/1.5rem var(--ui-monospaced);
      margin-bottom: 1rem;
      overflow-wrap: break-word;
    }    
  }
}

#glyph-grid {
  background: #fff;
  border: 1px solid #efefef;
  border-top: 0;
  border-left: 0;
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-auto-rows: auto;
  grid-auto-flow: row;
  grid-gap: 0;
  margin: 0 auto;
  max-width: 100%;

  @media screen and (max-width: $tablet) {
    grid-template-columns: repeat(10, 1fr);
  }

  @media screen and (max-width: $mobile) {
    grid-template-columns: repeat(6, 1fr);
  }

  .glyph-container {
    background: #fff;
    border: 1px solid #efefef;
    border-right: 0;
    border-bottom: 0;

    &.active {
      background: rgba(orange, 0.2);
    }

    &:hover {
      background: rgba(orange, 0.2);
      cursor: pointer;
    }

    &:active {
      background: rgba(orange, 0.4);
    }
  }
}

.pagination-wrapper {
  background: #101010;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  display: flex;
  justify-content: center;
  overflow-x: scroll;
  padding: 0.5rem;

  &::-webkit-scrollbar {
    display: none;
  }
}

#glyph-pagination {
  background: #101010;
  display: flex;
  overflow-x: scroll;

  &::-webkit-scrollbar {
    display: none;
  }

  a {
    background: #515151;
    border-right: 1px solid #313131;
    color: #fff;
    font: 600 var(--ms0)/1rem var(--ui-face);
    padding: 0.5rem 1rem 0.5rem;

    &:first-child {
      border-top-left-radius: 2px;
      border-bottom-left-radius: 2px;
    }

    &:last-child {
      border: 0;
      border-top-right-radius: 2px;
      border-bottom-right-radius: 2px;
    }

    &:hover {
      background: #313131;
    }
  }

  .selected-page {
    background: #313131;
  }
}