.nano-dropdown {
  position: relative;
  display: inline-flex;

  .nano-dropdown__trigger {
    cursor: pointer;
  }

  .nano-dropdown__content {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: var(--z-dropdown);
    min-width: 12rem;
    margin-top: var(--space-1);
    padding: var(--space-1);
    background-color: hsl(var(--color-popover));
    color: hsl(var(--color-popover-foreground));
    border: 1px solid hsl(var(--color-border));
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    opacity: 0;
    transform: translateY(-0.25rem);
    pointer-events: none;
    transition: opacity var(--duration-fast) var(--ease-default),
                  transform var(--duration-fast) var(--ease-default);

    &.is-open {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }
  }

  .nano-dropdown__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-1-5) var(--space-2);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: hsl(var(--color-foreground));
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    transition: background-color var(--duration-fast) var(--ease-default);

    &:hover,
    &:focus-visible {
      background-color: hsl(var(--color-muted));
      outline: none;
    }

    &[aria-disabled="true"],
    &:disabled {
      opacity: 0.5;
      pointer-events: none;
    }

    svg {
      width: 1rem;
      height: 1rem;
      flex-shrink: 0;
      color: hsl(var(--color-muted-foreground));
    }
  }

  .nano-dropdown__separator {
    height: 1px;
    margin: var(--space-1) calc(-1 * var(--space-1));
    background-color: hsl(var(--color-border));
  }

  .nano-dropdown__label {
    padding: var(--space-1-5) var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: hsl(var(--color-muted-foreground));
  }
}