// COMPONENT: Dropdown: an expandable menu of choices (usually links)
.dropdown
  display: inline-block
  position: relative
  vertical-align: top

  .dropdown-toggle
    margin-right: 0 !important
    text-overflow: ellipsis
    white-space: nowrap

    &[aria-expanded=true] + .dropdown-menu
      animation: dropdown-in 150ms $swift-in both
      display: block
      z-index: $z-index-modal

  .dropdown-menu
    --bs-position: end
    background: $background
    border: 1px solid $border-light
    border-radius: $border-radius
    box-shadow: $shadow-level-2
    display: none
    opacity: 0
    min-width: 100%
    padding: ($gutter * 2) 0
    position: absolute
    text-align: left
    transition: opacity 250ms $swift-in
    z-index: -1

    &:before, &:after
      border-style: solid
      border-width: 0 $gutter $gutter $gutter
      bottom: 100%
      content: ""
      height: 0
      position: absolute
      width: $gutter

      +small-screen
        left: auto
        right: $gutter

    &[data-popper-placement$="-start"]
      --bs-position: start

    &:not([data-popper-placement]),
    &[data-popper-placement$="-end"]
      --bs-position: end

      &::before,
      &::after
        right: 0

    &:before
      border-color: transparent transparent $border-light transparent
      transform: translate(-50%, -1px)

    &:after
      border-color: transparent transparent $background transparent
      transform: translateX(-50%)

    .dropdown-item
      $item-padding: $input-padding ($gutter * 2)

      padding: $item-padding
      position: relative
      white-space: nowrap

      &:focus,
      &:focus-within
        box-shadow: $focus-shadow
        z-index: $z-index-content + 1

      &--has-link
        padding: 0

        &:hover,
        &:focus,
        &:focus-within
          background-color: $input

        a
          display: block
          padding: $item-padding
          text-decoration: none

          &:hover
            color: inherit

          +with-focus-visible
            box-shadow: none

@keyframes dropdown-in
  0%
    opacity: 0
    margin-top: 0

  100%
    opacity: 1
    margin-top: $gutter + 1px
