.vp-navbar {
  transition:
    background var(--vp-t-color),
    box-shadow var(--vp-t-transform);
}

.transparent-navbar {
  .vp-navbar {
    background-color: transparent;
    box-shadow: none;
    backdrop-filter: none;

    &:has(.vp-toggle-navbar-button.is-active) {
      background-color: var(--navbar-c-bg);
    }
  }

  .vp-dropdown-wrapper .vp-dropdown {
    border: none;
    background: rgb(0 0 0 / 25%);
  }

  // styles for search plugins
  // stylelint-disable-next-line selector-class-pattern
  .DocSearch-Button {
    background: transparent;
  }

  .slimsearch-button {
    border-color: transparent;
    background-color: transparent;
  }
}