.vt-flyout {
  position: relative;
}

.vt-flyout:hover {
  color: var(--vt-c-bland);
  transition: color .25s;
}

.vt-flyout:hover .vt-flyout-button-text {
  color: var(--vt-c-text-2);
}

.vt-flyout:hover .vt-flyout-button-icon {
  fill: var(--vt-c-text-2);
}

.vt-flyout:hover .vt-flyout-menu,
.vt-flyout-button[aria-expanded="true"] + .vt-flyout-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.vt-flyout-button {
  display: flex;
  align-items: center;
  padding: 0 12px;
  height: var(--vt-nav-height);
  color: var(--vt-c-text-1);
  transition: color .5s;
}

.vt-flyout-button-text {
  display: flex;
  align-items: center;
  line-height: var(--vt-nav-height);
  font-size: 13px;
  font-weight: 500;
  color: var(--vt-c-text-1);
  transition: color .25s;
  white-space: nowrap;
}

.vt-flyout-button-text-icon {
  margin-left: 4px;
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.vt-flyout-button-icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
  transition: fill .25s;
}

.vt-flyout-menu {
  position: absolute;
  top: calc(var(--vt-nav-height) / 2 + 15px);
  right: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .25s, visibility .25s, transform .25s;
}