.dropdown
  position: relative
  display: inline-block
  z-index: 0
  overflow: visible
  line-height: 1
  font-size: $fs-14
  >.dropdown-trigger
    display: inline-flex
    align-items: center
    gap: 0.5rem
    box-sizing: border-box
    min-height: 2rem
    padding: 0.5rem 0.75rem
    cursor: pointer
    list-style: none
    outline: none
    border-radius: $border-bar
    color: var(--text-p2)
    text-decoration: none
    white-space: nowrap
    &::-webkit-details-marker
      display: none
    &::marker
      display: none
    &:hover, &:focus-visible
      color: var(--text-p1)
    >.ui-icon, >.dropdown-arrow
      flex: 0 0 1.25rem
      width: .75rem
      height: .75rem
    >.dropdown-arrow
      transform: rotate(-90deg)
      transition: transform 0.2s ease
    >span
      overflow: hidden
      text-overflow: ellipsis
  &[open]
    z-index: 10
    >.dropdown-trigger
      color: var(--text-p1)
      >.dropdown-arrow
        transform: rotate(90deg)

.tag-plugin > .dropdown-trigger
  background: var(--block)
  &:hover
    background: var(--block-border)

.tag-plugin[open] > .dropdown-trigger
  background: var(--block-border)

.dropdown-menu
  display: flex
  flex-direction: column
  gap: 0.125rem
  box-sizing: border-box
  max-width: calc(100vw - 2rem)
  max-height: calc(100vh - 2rem)
  padding: 0.25rem
  overflow-x: hidden
  overflow-y: auto
  font-size: $fs-14
  border-radius: $border-card
  corner-shape: $corner-shape
  frosted-surface()
  text-align: left
  line-height: 1

.dropdown-menu.ui-collection[data-density='compact']
  min-width: 150px
  --ui-item-min-height: calc(1.5rem + 2 * var(--ui-item-padding-y))

.dropdown-menu button.dropdown-item
  width: 100%
  border: 0
  color: inherit
  font: inherit
  text-align: left
  cursor: pointer
  appearance: none

.dropdown > .dropdown-menu
  position: absolute
  z-index: 10
  top: calc(100% + 0.5rem)
  left: 50%
  transform: translateX(-50%)
  visibility: hidden

.dropdown[direction=up] > .dropdown-menu
  top: auto
  bottom: calc(100% + 0.5rem)

.dropdown[align=left] > .dropdown-menu
  left: 0
  transform: none

.dropdown[align=right] > .dropdown-menu
  right: 0
  left: auto
  transform: none

.dropdown-layer
  position: fixed
  z-index: 1000
  top: 0
  right: 0
  bottom: 0
  left: 0
  pointer-events: none
  > .dropdown-bridge
    position: fixed
    z-index: 0
    top: 0
    right: 0
    bottom: 0
    left: 0
    pointer-events: auto
    background: transparent
  > .dropdown-menu
    position: fixed
    z-index: 1000
    top: 0
    left: 0
    transform: none
    pointer-events: auto
    visibility: hidden
    opacity: 0
    contain: paint
    will-change: opacity
    transition: opacity 0.16s ease-out
    &.dropdown-menu-visible
      visibility: visible
      opacity: 1

@media (prefers-reduced-motion: reduce)
  .dropdown-layer > .dropdown-menu, .dropdown > .dropdown-trigger > .dropdown-arrow
    transition: none