.vp-catalog-wrapper {
  margin-top: 8px;
  margin-bottom: 8px;

  &.index {
    ol {
      padding-inline-start: 0;
    }

    li {
      list-style-type: none;
    }

    .vp-catalogs {
      padding-inline-start: 0;
    }

    .vp-catalog {
      list-style-type: none;
    }

    .vp-catalog-title::before {
      content: '§' counter(catalog-item, upper-roman) ' ';
    }

    .vp-child-catalogs {
      counter-reset: child-catalog;
    }

    .vp-child-catalog {
      counter-increment: child-catalog;

      .vp-catalog-title::before {
        content: counter(catalog-item) '.' counter(child-catalog) ' ';
      }
    }

    .vp-sub-catalogs {
      padding-inline-start: 0.5rem;
    }
  }
}

.vp-catalogs {
  margin: 0;
  counter-reset: catalog-item;

  &.deep {
    padding-inline-start: 0;

    .vp-catalog {
      list-style-type: none;
    }
  }

  .font-icon {
    vertical-align: baseline;
    margin-inline-end: 0.25rem;
  }
}

.vp-catalog {
  counter-increment: catalog-item;

  &-main-title {
    margin-top: calc(0.5rem - var(--navbar-height, 3.6rem));
    margin-bottom: 0.5rem;
    padding-top: var(--navbar-height, 3.6rem);

    font-weight: 500;
    font-size: 1.75rem;

    &:first-child {
      margin-bottom: 0.5rem !important;
    }

    &:only-child {
      margin-bottom: 0 !important;
    }

    .vp-link {
      text-decoration: none !important;
    }
  }

  &-child-title {
    margin-bottom: 0.5rem !important;

    &.has-children {
      margin-top: calc(0.5rem - var(--navbar-height, 3.6rem));
      padding-top: var(--navbar-height, 3.6rem);
      border-bottom: 1px solid var(--catalog-border-color);

      font-weight: 500;
      font-size: 1.3rem;

      transition: border-color 0.3s;

      &:only-child {
        margin-bottom: 0 !important;
      }
    }

    .vp-link {
      text-decoration: none !important;
    }
  }

  &-sub-title {
    font-weight: 500;
    font-size: 1.1rem;

    &:only-child {
      margin-bottom: 0 !important;
    }
  }

  &-title {
    color: inherit;
    text-decoration: none;

    &:hover {
      color: var(--catalog-active-color);
    }
  }
}

.vp-child-catalogs {
  margin: 0;
}

.vp-child-catalog {
  list-style-type: disc;
}

.vp-sub-catalogs {
  counter-reset: sub-catalog;
}

.vp-sub-catalog {
  counter-increment: sub-catalog;

  .vp-link::before {
    content: counter(catalog-item) '.' counter(child-catalog) '.'
      counter(sub-catalog) ' ';
  }
}

.vp-sub-catalogs-wrapper {
  display: flex;
  flex-wrap: wrap;
}

.vp-sub-catalog-link {
  display: inline-block;

  margin: 4px 8px;
  padding: 4px 8px;
  border-radius: 6px;

  background-color: var(--catalog-bg-secondary-color);

  line-height: 1.5;
  overflow-wrap: break-word;

  transition:
    background-color 0.3s,
    color 0.3s;

  &:hover {
    background-color: var(--catalog-hover-color);
    color: var(--catalog-bg-color);
    text-decoration: none !important;
  }
}

.vp-catalog-header-anchor {
  font-size: 0.85em;
  float: left;
  margin-left: -1em;
  padding-right: 0em;
  margin-top: 0.125em;
  opacity: 0;
  user-select: none;
  text-decoration: none;
  content: '¶';

  @media print {
    display: none;
  }

  h2:hover &,
  h3:hover & {
    opacity: 1;
    text-decoration: none;
  }

  &:focus-visible {
    opacity: 1;
  }
}

.vp-empty-catalog {
  font-size: 1.25rem;
  text-align: center;
}