// search-box.scss

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

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

  > .item.top-sheet {
    flex: 0 0 25%;
  }
}

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

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

  & > .info > .slug {
    color: $base-head;
  }

  &:visited > .info > .slug {
    color: $base-text;
  }

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

  & > .info > .title {
    opacity: 0;
  }

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

    & > .info > .title {
      opacity: 1;
      color: $base-a;
    }
  }
}

.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%;
}

.top-sheet.top-sheet {
  padding: 4px;
  text-decoration: none;

  & > .info {
    display: block;
    background: darken($base-a, 8%);
    color: white;
    text-align: left;
    padding: 16px;
    width: auto;
    border-radius: 3px;
    box-shadow: $shadow2;
  }

  &:nth-of-type(3n + 1) {
    & > .info {
      background: darken($base-a, 8%);
    }

    &:hover > .info,
    &:focus > .info {
      background: darken($base-a, 16%);
    }
  }

  &:nth-of-type(3n + 2) {
    & > .info {
      background: darken($base-b, 8%);
    }

    &:hover > .info,
    &:focus > .info {
      background: darken($base-b, 16%);
    }
  }

  &:nth-of-type(3n + 3) {
    & > .info {
      background: darken($base-c, 8%);
    }

    &:hover > .info,
    &:focus > .info {
      background: darken($base-c, 16%);
    }
  }

  & > .info > .title {
    display: none;
  }
}