.cloud-vgp-language-dropdown[hidden] {
  display: none;
}

.cloud-vgp-language-dropdown {
  position: fixed;
  z-index: 10000;
  width: 230px;
  padding: 0.5rem;
  border:
    1px solid hsl(var(--border));
  border-radius: 0.875rem;
  background:
    hsl(var(--background));
  color:
    hsl(var(--foreground));
  box-shadow:
    0 18px 55px
    rgb(15 23 42 / 22%);
  opacity: 0;
  transform: translateY(-5px);
  pointer-events: none;
  transition:
    opacity 150ms ease,
    transform 160ms ease;
}

.cloud-vgp-language-dropdown.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.cloud-vgp-language-item {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0.75rem;
  border-radius: 0.625rem;
  color:
    hsl(var(--foreground));
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 160ms ease,
    color 160ms ease;
}

.cloud-vgp-language-item:hover,
.cloud-vgp-language-item:focus-visible {
  background:
    hsl(var(--muted));
  color:
    hsl(var(--primary));
  outline: none;
}

.cloud-vgp-language-item.is-current {
  background:
    hsl(var(--primary) / 0.09);
  color:
    hsl(var(--primary));
  font-weight: 700;
  cursor: default;
}

.cloud-vgp-language-label {
  font-weight: 600;
}

.cloud-vgp-language-code {
  min-width: 30px;
  color:
    hsl(var(--muted-foreground));
  font-size: 0.75rem;
  font-weight: 700;
  text-align: right;
}

.cloud-vgp-language-item.is-current
.cloud-vgp-language-code {
  color:
    hsl(var(--primary));
}

@media (prefers-reduced-motion: reduce) {
  .cloud-vgp-language-dropdown,
  .cloud-vgp-language-item {
    transition: none;
  }
}