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

.vp-dropdown-wrapper {
  cursor: pointer;

  &:not(:hover) {
    .arrow {
      transform: rotate(-180deg);
    }
  }

  .auto-link {
    position: relative;

    display: block;

    margin-bottom: 0;
    border-bottom: none;

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

    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.7rem;

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

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

    &.route-link-active {
      color: var(--vp-c-accent);
    }
  }
}

.vp-dropdown-title {
  @include reset.button;

  padding: 0 0.25rem;

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

  font-weight: 500;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;

  cursor: inherit;

  &:hover {
    border-color: transparent;
  }

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

  .arrow {
    @include arrow.arrow;
    font-size: 1.2em;
  }
}

.vp-dropdown {
  position: absolute;
  inset-inline-end: 0;
  top: 100%;

  overflow-y: auto;

  box-sizing: border-box;
  min-width: 6rem;
  max-height: calc(100vh - var(--navbar-height));
  margin: 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--vp-c-gutter);
  border-radius: 0.5rem;

  background: var(--vp-c-bg-elv);
  box-shadow: 2px 2px 10px var(--vp-c-shadow);
  list-style-type: none;

  text-align: start;
  white-space: nowrap;

  opacity: 0;
  visibility: hidden;

  transition: all 0.18s ease-out;

  transform: scale(0.9);

  .vp-dropdown-wrapper:hover &,
  .vp-dropdown-wrapper.open & {
    z-index: 2;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}

.vp-dropdown-item {
  color: inherit;
  line-height: 1.7rem;
}

.vp-dropdown-subtitle {
  margin: 0;
  padding: 0.5rem 0.25rem 0;

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

  font-weight: 600;
  font-size: 0.75rem;
  line-height: 2;
  text-transform: uppercase;

  .vp-dropdown-item:first-child & {
    padding-top: 0;
  }
}

.vp-dropdown-subitems {
  margin: 0;
  padding: 0 0 0.25rem;
  list-style-type: none;

  .vp-dropdown-item:last-child & {
    padding-bottom: 0;
  }
}