@import "../css/colors"
@import "../css/vars"

$dropdownBorderColor = $borderGray
$dropdownBackgroundColor = $white


highlight-on-hover()
  &:not([disabled]):hover,
  &:not([disabled]):active
    background-color: $darkGray
    color: $lightGray

:local(.menu)
  position: relative
  display: inline-block

:local(.collapsible)
  /* Open on top of other content. */
  position: absolute !important
  z-index: 1000
  margin-top: -1px
  min-width: 100%
  right: 0

:local(.dropdown)
  margin: 0
  padding: 0
  box-sizing: border-box
  min-width: 100%
  list-style-type: none
  max-height: 1000px
  border: 1px solid $dropdownBorderColor

:local(.menu .btn)
  height: 80px
  padding-left: 30px
  padding-right: 30px
  line-height: 80px
  //border: 1px solid $blue
  highlight-on-hover()

:local(.menu.secondary .btn)
  height: 80px
  line-height: 80px
  background-color: $white
  border: solid 1px $borderGray

:local(.menu.small .btn)
  height: 50px
  line-height: 50px

:local(.menu .dropdown .btn)
  height: 50px
  line-height: 50px
  min-width: 100%
  background-color: $dropdownBackgroundColor
  border: none
  text-align: left
  highlight-on-hover()

:local(.toggle)
  border-left-color: $white

:local(.toolbar .toggle)
  border-width: 1px !important
  //border-color: $blue
  border-left-color: $white

:local(.open .toggle)
  background-color: $dropdownBackgroundColor
  border: 1px solid $dropdownBorderColor
  z-index: 1001
  highlight-on-hover()
  // No border between icon toggle and open menu.
  border-bottom-color: $dropdownBackgroundColor

:local(.hideAllButFirst) > :not(:first-child)
  display: none

:local(.hideFirst) > :first-child
  display: none

// We want to show the last child if it has at least two siblings.
// We achieve this by hiding the first two children and everything but the last child.
:local(.showLastIfMultipleSiblings) > :nth-child(-n+2),
:local(.showLastIfMultipleSiblings) > :not(:last-child)
  display: none;