kata-dropdown-menu {
  display: inline-block;
  position: relative;
}

kata-dropdown-menu [data-dropdown-trigger] {
  display: inline-flex;
  align-items: center;
  gap: var(--kata-space-sm);
  padding: var(--kata-space-md) var(--kata-space-xl);
  font-size: var(--kata-font-size-sm);
  font-weight: 500;
  background: none;
  border: 1px solid var(--kata-color-border, var(--pico-muted-border-color, #dfe3e6));
  border-radius: var(--kata-radius-md, 0.375rem);
  cursor: pointer;
}

kata-dropdown-menu [data-dropdown-trigger]:hover {
  background-color: var(--kata-color-surface-muted, var(--pico-muted-background-color, #f8fafc));
}

kata-dropdown-menu [data-dropdown-content] {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  min-width: 10rem;
  background-color: var(--kata-color-background, var(--pico-background-color, #fff));
  border: 1px solid var(--kata-color-border, var(--pico-muted-border-color, #dfe3e6));
  border-radius: var(--kata-radius-md, 0.375rem);
  box-shadow: var(--kata-shadow-md, 0 4px 12px rgb(0 0 0 / 0.1));
  z-index: 100;
  padding: var(--kata-space-sm);
}

kata-dropdown-menu [role="menuitem"] {
  display: block;
  width: 100%;
  padding: var(--kata-space-md) var(--kata-space-lg);
  font-size: var(--kata-font-size-sm);
  text-align: left;
  background: none;
  border: none;
  border-radius: var(--kata-radius-sm, 0.25rem);
  cursor: pointer;
}

kata-dropdown-menu [role="menuitem"]:hover {
  background-color: var(--kata-color-surface-muted, var(--pico-muted-background-color, #f8fafc));
}

/* Shadow DOM scope. CSS custom properties inherit from the host theme. */
:host {
  display: inline-block;
  position: relative;
}

:host [data-dropdown-trigger] {
  display: inline-flex;
  align-items: center;
  gap: var(--kata-space-sm);
  padding: var(--kata-space-md) var(--kata-space-xl);
  font-size: var(--kata-font-size-sm);
  font-weight: 500;
  background: none;
  border: 1px solid var(--kata-color-border, var(--pico-muted-border-color, #dfe3e6));
  border-radius: var(--kata-radius-md, 0.375rem);
  cursor: pointer;
}

:host [data-dropdown-trigger]:hover {
  background-color: var(--kata-color-surface-muted, var(--pico-muted-background-color, #f8fafc));
}

:host [data-dropdown-content] {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  min-width: 10rem;
  background-color: var(--kata-color-background, var(--pico-background-color, #fff));
  border: 1px solid var(--kata-color-border, var(--pico-muted-border-color, #dfe3e6));
  border-radius: var(--kata-radius-md, 0.375rem);
  box-shadow: var(--kata-shadow-md, 0 4px 12px rgb(0 0 0 / 0.1));
  z-index: 100;
  padding: var(--kata-space-sm);
}

:host [role="menuitem"] {
  display: block;
  width: 100%;
  padding: var(--kata-space-md) var(--kata-space-lg);
  font-size: var(--kata-font-size-sm);
  text-align: left;
  background: none;
  border: none;
  border-radius: var(--kata-radius-sm, 0.25rem);
  cursor: pointer;
}

:host [role="menuitem"]:hover {
  background-color: var(--kata-color-surface-muted, var(--pico-muted-background-color, #f8fafc));
}

:host ::slotted([role="menuitem"]) {
  display: block;
  width: 100%;
  padding: var(--kata-space-md) var(--kata-space-lg);
  font-size: var(--kata-font-size-sm);
  text-align: left;
  background: none;
  border: none;
  border-radius: var(--kata-radius-sm, 0.25rem);
  cursor: pointer;
}