.search-box {
  background: $base-panel;
  box-shadow: $shadow3;

  & > input {
    padding: 16px;
    background: transparent;
    border: 0;
    width: 100%;
  }
}

.pages-list {
  & {
    display: flex;
    flex-wrap: wrap;
  }

  > .item {
    padding: 4px 0;
    flex: 0 0 50%;
  }
}

// Article
.pages-list > .article {
  text-decoration: none;
  display: block;
  white-space: nowrap;

  &,
  &:visited {
    color: $base-mute3;
  }

  & > code {
    color: $base-head;
  }

  &:visited > code {
    color: $base-text;
  }

  & > .title::before {
    content: '';
    margin: 0 4px;
  }

  & > .title {
    opacity: 0;
  }

  &:hover,
  &:focus {
    & {
      color: $base-mute;
    }

    & > code {
      color: $base-a;
    }

    & > .title {
      opacity: 1;
    }
  }
}

.pages-list > .category {
  @include font-size(1);
  border-bottom: solid 1px $dark-line-color;
  margin: 16px 0;
  padding: 0 0 16px 0;
  font-weight: normal;
  color: $base-b;
  flex: 0 0 100%;
}