.hs-dropdown {
  position: relative;
  display: inline-block;
}

.hs-dropdown__menu {
  position: absolute;
  top: calc(100% + var(--hs-space-8));
  inset-inline-start: 0;
  z-index: var(--hs-z-dropdown);
  min-width: 12rem;
  padding-block: var(--hs-space-8);
  background: var(--hs-color-surface);
  border: 1px solid var(--hs-color-border);
  border-radius: var(--hs-radius-md);
  box-shadow: var(--hs-shadow-dropdown);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-.25rem);
  pointer-events: none;
  /* pointer-events: none already stops mouse interaction while closed,
     but its <a>/<button> items stay in the DOM and were still reachable
     by keyboard Tab navigation with nothing visible to show where focus
     landed - visibility: hidden is what actually excludes focusable
     descendants from the tab order. The transition-delay keeps the
     existing open/close animation intact: switching to visible happens
     instantly on open, but switching to hidden waits for the opacity/
     transform transition to finish first, matching the same technique
     already used for the drawer backdrop (assets/css/components/drawer.css). */
  transition: opacity var(--hs-transition-fast) var(--hs-ease),
    transform var(--hs-transition-fast) var(--hs-ease),
    visibility 0s linear var(--hs-transition-fast);
}

.hs-dropdown__menu--end {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

.hs-dropdown[data-open="true"] .hs-dropdown__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity var(--hs-transition-fast) var(--hs-ease),
    transform var(--hs-transition-fast) var(--hs-ease),
    visibility 0s linear 0s;
}

.hs-dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--hs-space-8);
  width: 100%;
  padding: var(--hs-space-8) var(--hs-space-16);
  font-size: var(--hs-font-size-body-sm);
  color: var(--hs-color-text);
  text-align: start;
  transition: background-color var(--hs-transition-fast) var(--hs-ease);
}
.hs-dropdown__item:hover {
  background: var(--hs-color-surface-sunken);
}

.hs-dropdown__divider {
  height: 1px;
  margin-block: var(--hs-space-8);
  background: var(--hs-color-border);
}