:host {
  cursor: pointer;
  display: flex;
  width: 100%; /* Ensure the host takes full width */
}

/* Make the disabled styles more specific and add !important to ensure they apply */
:host(.is-disabled) {
  cursor: not-allowed !important;
  opacity: 0.5 !important;
}
:host(.is-disabled) .pds-dropdown-menu-item__content {
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.pds-dropdown-menu-item__content {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: var(--pine-dimension-xs);
  color: var(--pine-color-text);
  display: flex;
  flex-grow: 1; /* Make it grow to fill available space */
  font: var(--pine-typography-body-medium);
  gap: var(--pine-dimension-xs);
  margin: calc(var(--pine-border-width) + 2px);
  padding: var(--pine-dimension-xs);
  text-align: start; /* Ensure text aligns properly */
  width: 100%; /* Ensure full width */
}
.pds-dropdown-menu-item__content:hover {
  background-color: var(--pine-color-background-muted);
  color: var(--pine-color-text-hover);
}
.pds-dropdown-menu-item__content {
  /* Focus styles applied via class + browser focus */
}
.pds-dropdown-menu-item__content:focus, .pds-dropdown-menu-item__content:focus-visible, .pds-dropdown-menu-item__content.has-focus {
  outline: var(--pine-outline-focus);
  outline-offset: var(--pine-border-width);
}

:host(.destructive) .pds-dropdown-menu-item__content {
  --pds-context-link-color: var(--pine-color-danger);
  --pds-context-link-color-hover: var(--pine-color-danger-hover);
  align-items: center;
  color: var(--pine-color-danger);
}
:host(.destructive) .pds-dropdown-menu-item__content:hover {
  background-color: var(--pine-color-danger-disabled);
  color: var(--pine-color-danger-hover);
}
:host(.destructive) .pds-dropdown-menu-item__content:focus, :host(.destructive) .pds-dropdown-menu-item__content:focus-visible, :host(.destructive) .pds-dropdown-menu-item__content.has-focus {
  background-color: var(--pine-color-danger-disabled);
  outline: var(--pine-outline-focus-danger);
  outline-offset: var(--pine-border-width);
}

/* Remove outline on contained links using the custom property */
pds-link::part(link):focus,
pds-link::part(link):focus-visible {
  box-shadow: none;
  outline: none;
}

pds-link::part(link) {
  align-items: center;
  display: flex;
  gap: var(--pine-dimension-xs);
  margin: calc(var(--pine-dimension-xs) * -1);
  padding: var(--pine-dimension-xs);
  text-decoration: none;
  width: calc(100% + var(--pine-dimension-xs) * 2);
}