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

.vp-sidebar-group {
  &:not(.collapsible) {
    .vp-sidebar-header:not(.clickable) {
      color: inherit;
      cursor: auto;
    }
  }

  .vp-sidebar-group {
    .vp-sidebar-header {
      font-size: 1em;
    }
  }
}

.vp-sidebar-header {
  display: flex;
  align-items: center;

  // fix strange outline
  overflow: hidden;

  box-sizing: border-box;
  width: calc(100% - 1rem);
  margin: 0;
  margin-inline: 0.5rem;
  padding: 0.25rem 0.5rem;
  border-width: 0;
  border-radius: 0.375rem;

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

  font-size: 1.1em;
  line-height: 1.5;
  text-align: start;

  user-select: none;

  transition: color 0.15s ease;

  transform: rotate(0);

  &.open {
    color: inherit;
  }

  &.clickable {
    @include reset.button;
    font-family: inherit;

    &:hover {
      background: var(--vp-c-control);
    }

    &.exact {
      border-inline-start-color: var(--vp-c-accent-bg);
      color: var(--vp-c-accent);

      a {
        color: inherit;
      }
    }
  }

  .vp-sidebar-title {
    flex: 1;
  }

  .vp-arrow {
    @include arrow.arrow;

    & {
      font-size: 1.5em;
    }
  }
}