$dropdown-menu-min-width: 12rem !default

$dropdown-content-background-color: v("scheme-main") !default
$dropdown-content-arrow: v("link") !default
$dropdown-content-offset: 4px !default
$dropdown-content-padding-bottom: 0.5rem !default
$dropdown-content-padding-top: 0.5rem !default
$dropdown-content-radius: v("radius") !default
$dropdown-content-shadow: 0 0.5em 1em -0.125em vAlphaChange("scheme-invert", 0.1), 0 0px 0 1px vAlphaChange("scheme-invert", 0.02) !default
$dropdown-content-z: 20 !default

$dropdown-item-color: v("text") !default
$dropdown-item-hover-color: v("scheme-invert") !default
$dropdown-item-hover-background-color: v("background") !default
$dropdown-item-active-color: v("link-invert") !default
$dropdown-item-active-background-color: v("link") !default

$dropdown-divider-background-color: v("border-light") !default

+register(dropdown-content-offset,$dropdown-content-offset, true)
+register(dropdown-menu-min-width,$dropdown-menu-min-width, true)
+register(dropdown-content-z,$dropdown-content-z, true)
+register(dropdown-content-background-color,$dropdown-content-background-color, true)
+register(dropdown-content-radius,$dropdown-content-radius, true)
+register(dropdown-content-shadow,$dropdown-content-shadow, true)
+register(dropdown-content-padding-bottom,$dropdown-content-padding-bottom, true)
+register(dropdown-content-padding-top,$dropdown-content-padding-top, true)
+register(dropdown-item-color,$dropdown-item-color, true)
+register(dropdown-item-hover-background-color,$dropdown-item-hover-background-color, true)
+register(dropdown-item-hover-color,$dropdown-item-hover-color, true)
+register(dropdown-item-active-background-color,$dropdown-item-active-background-color, true)
+register(dropdown-item-active-color,$dropdown-item-active-color, true)
+register(dropdown-divider-background-color,$dropdown-divider-background-color, true)

.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
      bottom: 100%
      padding-bottom: v("dropdown-content-offset")
      padding-top: initial
      top: auto

.dropdown-menu
  display: none
  +ltr-property("left", 0)
  min-width: v("dropdown-menu-min-width")
  padding-top: v("dropdown-content-offset")
  position: absolute
  top: 100%
  z-index: v("dropdown-content-z")

.dropdown-content
  background-color: v("dropdown-content-background-color")
  border-radius: v("dropdown-content-radius")
  box-shadow: v("dropdown-content-shadow")
  padding-bottom: v("dropdown-content-padding-bottom")
  padding-top: v("dropdown-content-padding-top")

.dropdown-item
  color: v("dropdown-item-color")
  display: block
  font-size: 0.875rem
  line-height: 1.5
  padding: 0.375rem 1rem
  position: relative

a.dropdown-item,
button.dropdown-item
  +ltr-property("padding-right", 3rem)
  text-align: inherit
  white-space: nowrap
  width: 100%
  &:hover
    background-color: v("dropdown-item-hover-background-color")
    color: v("dropdown-item-hover-color")
  &.is-active
    background-color: v("dropdown-item-active-background-color")
    color: v("dropdown-item-active-color")

.dropdown-divider
  background-color: v("dropdown-divider-background-color")
  border: none
  display: block
  height: 1px
  margin: 0.5rem 0