@use "vuepress-shared/styles/reset";

.vp-blog-infos {
  margin: 8px auto;
  padding: 8px 16px;

  .vp-page & {
    border-radius: 6px;
    background: var(--vp-c-bg-elv);
    box-shadow: 0 1px 3px 1px var(--vp-c-shadow);
    transition: box-shadow var(--vp-t-transform);

    &:hover {
      box-shadow: 0 2px 6px 2px var(--vp-c-shadow);
    }
  }

  .timeline-list-wrapper {
    .content {
      max-height: 60vh;
    }
  }
}

.vp-blog-type-switcher {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}

.vp-blog-type-button {
  @include reset.button;
  width: 44px;
  height: 44px;
  margin: 0 8px;
  padding: 4px;

  color: var(--vp-c-text);

  &:focus {
    outline: none;
  }
}

.vp-blog-type-icon-wrapper {
  width: 20px;
  height: 20px;
  padding: 8px;
  border-radius: 50%;

  background: rgb(127 127 127 / 15%);

  transition: background var(--vp-t-color);

  [data-theme="dark"] & {
    background: rgb(255 255 255 / 15%);
  }

  &:hover {
    cursor: pointer;
  }

  &.active {
    background: var(--vp-c-accent-bg);
    color: var(--vp-c-accent-text);
  }

  .icon {
    width: 100%;
    height: 100%;
  }
}

.vp-star-article-wrapper,
.vp-category-wrapper,
.vp-tag-wrapper {
  padding: 8px 0;

  .title {
    cursor: pointer;

    .icon {
      position: relative;
      bottom: -0.125rem;

      width: 16px;
      height: 16px;
      margin: 0 6px;
    }

    .num {
      position: relative;
      margin: 0 2px;
      font-size: 22px;
      font-family: var(--vp-font-heading);
    }
  }
}

.vp-star-articles {
  overflow-y: auto;
  max-height: 80vh;
  margin: 8px auto;
  line-height: 1.5;
}

.vp-star-article {
  padding: 12px 8px 4px;
  border-bottom: 1px dashed var(--vp-c-border-hard);
  transition:
    border-color var(--vp-t-color),
    color var(--vp-t-color);

  a {
    color: inherit;
  }

  &:hover {
    cursor: pointer;

    a {
      color: var(--vp-c-accent);
    }
  }
}

.vp-category-wrapper {
  .vp-category-list {
    overflow-y: auto;
    max-height: 80vh;
    margin: 8px auto;
  }
}

.vp-tag-wrapper {
  .vp-tag-list {
    overflow-y: auto;
    max-height: 80vh;
    margin: 8px auto;
  }
}