@use "@sass-palette/hope-config";
@use "sass:color";
@use "vuepress-shared/styles/arrow";
@use "@sass-palette/helper";

.vp-sidebar-heading {
  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(--text-color);

  font-size: 1.1em;
  line-height: 1.5;

  user-select: none;

  transition: color 0.15s ease;
  transform: rotate(0);

  &.open {
    color: inherit;
  }

  &.clickable {
    &:hover {
      background: var(--bg-color-secondary);
    }

    &.exact {
      border-inline-start-color: var(--theme-color);
      color: var(--theme-color);

      a {
        color: inherit;
      }
    }
  }

  .icon {
    margin-inline-end: 0.25em;
  }

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

  .vp-arrow {
    @include arrow.arrow;

    font-size: 1.5em;
  }
}

button.vp-sidebar-heading {
  outline: none;

  font-weight: inherit;
  font-family: inherit;
  line-height: inherit;
  text-align: start;

  cursor: pointer;
}

.vp-sidebar-link {
  display: inline-block;

  box-sizing: border-box;

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

  color: var(--text-color);

  font-weight: 400;
  font-size: 1em;
  line-height: 1.5;

  .icon {
    margin-inline-end: 0.25em;
  }

  &:hover {
    background: var(--bg-color-secondary);
  }

  &.active {
    background: var(--theme-color-mask);
    color: var(--theme-color);
    font-weight: 500;

    .icon {
      color: var(--theme-color);
    }
  }

  .vp-sidebar-sub-headers & {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    border-inline-start: none;

    &.active {
      background: transparent;
      font-weight: 500;
    }
  }
}