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


:local(.menu)
  position: relative
  background: $white

  &:before
    opacity: 0
    content: ''
    position: absolute;
    top: -8px
    left: 12px
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 8px 8px 8px;
    border-color: transparent transparent $white transparent;
    z-index: 100
    transition: opacity .2s


  hr
    margin: 0
    border: 0;
    border-top: 1px solid $borderGray

    // When some menu items are hidden, hr's might end up next to each other.
    // In that case, only display one.
    +hr
      display: none

:local(.menu.triangleCentered)
  &:before
    left: 100%
    margin-left: -50%

:local(.menu .collapsible)
  background: $white

:local(.menu.triangle)
  &:before
    opacity: 1


:local(.menu.shadow)
  > div
    box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.26)