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

.dropdown--block {
  display: flex;
}

.dropdown--block .dropdown__trigger {
  justify-content: space-between;
}

.dropdown--block .dropdown__menu {
  min-inline-size: 100%;
}

.dropdown__trigger .chevron {
  color: var(--color-text-muted);
  will-change: rotate; /* prevents the icon from twitching on Safari */
}

.dropdown__trigger[aria-expanded="true"] {
  background-color: var(--color-surface-hover);
  color: var(--color-text);
}

ul.dropdown__menu {
  --dropdown-menu-min-size: 12rem;
  --dropdown-menu-max-size: 18rem;

  position: absolute;
  inset-block-start: calc(100% + var(--space-2xs));
  inset-inline-start: 0;
  z-index: var(--z-popover);
  min-inline-size: var(--dropdown-menu-min-size);
  max-inline-size: var(--dropdown-menu-max-size);
  padding-block: var(--space-2xs);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transform-origin: top center;
  opacity: 1;
  scale: none;
  transition:
    opacity var(--duration-enter) var(--easing-enter),
    scale var(--duration-enter) var(--easing-enter),
    display var(--duration-enter) allow-discrete;
}

ul.dropdown__menu[hidden] {
  opacity: 0;
  scale: var(--scale-recessed);
  transition:
    opacity var(--duration-leave) var(--easing-leave),
    scale var(--duration-leave) var(--easing-leave),
    display var(--duration-leave) allow-discrete;
}

@starting-style {
  ul.dropdown__menu {
    opacity: 0;
    scale: var(--scale-recessed);
  }
}

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

.dropdown--up .dropdown__menu {
  inset-block-start: auto;
  inset-block-end: calc(100% + var(--space-2xs));
  transform-origin: bottom center;
}

.dropdown--up .chevron {
  rotate: -180deg;
}

.dropdown--up .dropdown__trigger[aria-expanded="true"] .chevron {
  rotate: 0deg;
}

.dropdown__divider {
  block-size: 0;
  margin-block: var(--space-2xs);
  margin-inline: var(--space-xs);
  border-block-start: var(--border-width) solid var(--color-border);
}

@media (forced-colors: active) {
  .dropdown__menu {
    border: var(--border-width) solid currentcolor;
  }
}