:root {
  --dropdown-background-color: white;
  --dropdown-font-weight: 500;
  --dropdown-link-color: blue;
  --dropdown-hover-background-color: #efefef;
  --dropdown-active-background-color: #F2F4FB;
}

.dropdown {
  display: flex;
  position: relative;
  font-weight: var(--dropdown-font-weight);
  font-size: 0.9em;
  // color: #888;
  background-color: lightblue;
  border-radius: 8px;
  // vertical-align: top;
  align-items: center;
  border-radius: 8px;
  background: var(--dropdown-background-color);
  border: 1px solid var(--global-border-color);
  height: 40px;
  padding: 0 1em;
  &:hover {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    > .dropdown__menu {
      display: block;
    }
  }
}

// .DocSearch-Button {
// }

// .dropdown--hoverable:hover .dropdown__menu, .dropdown--show .dropdown__menu {
//   display: block;
// }

// .dropdown--right .dropdown__menu {
//   right: 0;
// }

// .dropdown--nocaret .navbar__link:after {
//   content: none !important;
// }

.dropdown__menu {
  // background-color: var(--dropdown-background-color);
  // border-radius: var(--global-border-radius);
  // box-shadow: var(--ifm-global-shadow-md);
  border-radius: 8px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  background: var(--dropdown-background-color);
  border: 1px solid var(--global-border-color);
  display: none;
  min-width: 10rem;
  list-style: none;
  // padding: 0.5rem;
  position: absolute;
  top: 100%;
  left: -1px;
  width: calc(100% + 2px);
  z-index: var(--ifm-z-index-dropdown);
}

.dropdown__link {
  // border-radius: 0.375rem;
  color: var(--dropdown-link-color);
  display: block;
  font-size: 0.875rem;
  padding: 0.375rem 0.5rem;
  white-space: nowrap;

  &:hover {
    background-color: var(--dropdown-hover-background-color);
    text-decoration: none;
    color: var(--dropdown-link-color);
  }
}

.dropdown__link--active {
  background-color: var(--dropdown-active-background-color);
  text-decoration: none;
  color: var(--dropdown-link-color);
  --dropdown-link-color:var(--link-color);

  &:hover {
    --dropdown-link-color:var(--link-color);
  }
}

.dropdown > .navbar__link:after {
  border-color: currentColor;
  border-top: 0.4em solid;
  border-right: 0.4em solid transparent;
  border-bottom: 0;
  border-left: 0.4em solid transparent;
  content: '';
  display: inline-block;
  margin-left: 0.3em;
  vertical-align: 0.15em;
}