@use "@sass-palette/hope-config";
.vp-article-type-wrapper {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: center;

  padding-inline-start: 0;

  list-style: none;

  font-weight: 600;
  font-size: 18px;

  @media (max-width: hope-config.$mobile) {
    font-size: 16px;
  }
}

.vp-article-type {
  position: relative;

  vertical-align: middle;

  margin: 0.3em 0.8em;

  line-height: 1.2;

  cursor: pointer;

  &::after {
    content: " ";

    position: absolute;
    inset: auto 50% -6px;

    height: 2px;
    border-radius: 1px;

    background: var(--vp-c-accent-bg);

    visibility: hidden;

    transition: inset 0.2s ease-in-out;
  }

  a {
    display: inline-block;
    color: inherit;
    transition: all 0.3s ease-in-out;
  }

  &.active {
    position: relative;

    a {
      color: var(--vp-c-accent);
      transform: scale(1.1, 1.1);
    }
  }

  &:hover,
  &.active {
    &::after {
      inset: auto calc(50% - 8px) -6px;
      visibility: visible;
    }
  }
}