.trigger {
  display: none;
  width: 30px;
  height: 31px;
  padding: 0;

  @media (max-width: 1099.98px) {
    display: inline-flex;
  }
}
.content {
  z-index: 50;
  min-width: 220px;
  padding: 4px;
  background-color: var(--color-fd-popover, var(--color-fd-background));
  color: var(--color-fd-popover-foreground, var(--color-fd-foreground));
  border: 1px solid var(--color-fd-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  animation: nav-menu-in 120ms ease-out;
}

@keyframes nav-menu-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1;
  color: var(--color-fd-muted-foreground);
  text-decoration: none;
  transition: color 120ms ease, background-color 120ms ease;

  &:hover {
    color: var(--color-fd-accent-foreground);
    background-color: var(--color-fd-accent);
  }

  &[data-active="true"] {
    color: var(--color-fd-accent-foreground);
    background-color: var(--color-fd-accent);
  }
}

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 14px;
  height: 14px;

  svg {
    width: 14px;
    height: 14px;
  }
}