$dropdown-content-background-color ?= $white
$dropdown-content-arrow ?= $link
$dropdown-content-offset ?= 4px
$dropdown-content-radius ?= $radius
$dropdown-content-shadow ?= 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
$dropdown-content-z ?= 20

$dropdown-item-color ?= $grey-dark
$dropdown-item-hover-color ?= $black
$dropdown-item-hover-background-color ?= $background
$dropdown-item-active-color ?= $link-invert
$dropdown-item-active-background-color ?= $link

$dropdown-divider-background ?= $border

.dropdown
  display inline-flex
  position relative
  vertical-align top
  &.is-active,
  &.is-hoverable:hover
    .dropdown-menu
      display block
  &.is-right
    .dropdown-menu
      left auto
      right 0
  &.is-up
    .dropdown-menu
      top auto
      bottom 100%
      padding-top unset
      padding-bottom $dropdown-content-offset
.dropdown-menu
  display none
  left 0
  min-width 12rem
  padding-top $dropdown-content-offset
  position absolute
  top 100%
  z-index $dropdown-content-z

.dropdown-content
  background-color $dropdown-content-background-color
  border-radius $dropdown-content-radius
  box-shadow $dropdown-content-shadow
  padding-bottom 0.5rem
  padding-top 0.5rem

.dropdown-item
  color $dropdown-item-color
  display block
  font-size 0.875rem
  line-height 1.5
  padding 0.375rem 1rem
  position relative

a.dropdown-item
  padding-right 3rem
  white-space nowrap
  &:hover,
  &.is-active
    background-color $dropdown-item-hover-background-color
    color $dropdown-item-hover-color

.dropdown-divider
  background-color $dropdown-divider-background-color
  border none
  display block
  height 1px
  margin 0.5rem 0