@import "../utilities/mixins"

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

$dropdown-content-background-color: var(--scheme-main, #{$scheme-main}) !default
$dropdown-content-arrow: var(--link, #{$link}) !default
$dropdown-content-offset: 4px !default
$dropdown-content-padding-bottom: 0.5rem !default
$dropdown-content-padding-top: 0.5rem !default
$dropdown-content-radius: var(--radius, #{$radius}) !default
$dropdown-content-shadow: var(--shadow, #{$shadow}) !default
$dropdown-content-z: 20 !default

$dropdown-item-color: var(--text, #{$text}) !default
$dropdown-item-padding: var(--item-padding, #{$item-padding}) !default
$dropdown-item-hover-color: var(--scheme-invert, #{$scheme-invert}) !default
$dropdown-item-hover-background-color: var(--background, #{$background}) !default
$dropdown-item-active-color: var(--link-invert, #{$link-invert}) !default
$dropdown-item-active-background-color: var(--link, #{$link}) !default

$dropdown-divider-background-color: var(--border-light, #{$border-light}) !default

$css-vars-map: ('dropdown-content-offset': ($dropdown-content-offset),'dropdown-menu-min-width': ($dropdown-menu-min-width),'dropdown-content-z': ($dropdown-content-z),'dropdown-content-background-color': ($dropdown-content-background-color),'dropdown-content-radius': ($dropdown-content-radius),'dropdown-content-shadow': ($dropdown-content-shadow),'dropdown-content-padding-bottom': ($dropdown-content-padding-bottom),'dropdown-content-padding-top': ($dropdown-content-padding-top),'dropdown-item-color': ($dropdown-item-color),'dropdown-item-padding':($dropdown-item-padding),'dropdown-item-hover-background-color': ($dropdown-item-hover-background-color),'dropdown-item-hover-color': ($dropdown-item-hover-color),'dropdown-item-active-background-color': ($dropdown-item-active-background-color),'dropdown-item-active-color': ($dropdown-item-active-color),'dropdown-divider-background-color': ($dropdown-divider-background-color))
// --dropdown-content-offset: #{$dropdown-content-offset}
// --dropdown-menu-min-width: #{$dropdown-menu-min-width}
// --dropdown-content-z: #{$dropdown-content-z}
// --dropdown-content-background-color: #{$dropdown-content-background-color}
// --dropdown-content-radius: #{$dropdown-content-radius}
// --dropdown-content-shadow: #{$dropdown-content-shadow}
// --dropdown-content-padding-bottom: #{$dropdown-content-padding-bottom}
// --dropdown-content-padding-top: #{$dropdown-content-padding-top}
// --dropdown-item-color: #{$dropdown-item-color}
// --dropdown-item-hover-background-color: #{$dropdown-item-hover-background-color}
// --dropdown-item-hover-color: #{$dropdown-item-hover-color}
// --dropdown-item-active-background-color: #{$dropdown-item-active-background-color}
// --dropdown-item-active-color: #{$dropdown-item-active-color}
// --dropdown-divider-background-color: #{$dropdown-divider-background-color}

.dropdown, [class^="dropdown-"]
  +registerCSSVars($css-vars-map, $at-root)

.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: var(--dropdown-content-offset)
      padding-top: initial
      top: auto

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

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

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

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

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