@import '../../stylesheets/defaults'

fadeIn(y)
  from
    opacity 0
    transform translateY((y)px)
  to
    opacity 0.9

fadeOut(y)
  from
    opacity 0.9
  to
    opacity 0
    transform translateY((y)px)

@keyframes fadeOverlayInDown
  fadeIn(-10)

@keyframes fadeOverlayOutDown
  fadeOut(-10)
  
@keyframes fadeOverlayInUp
  fadeIn(10)

@keyframes fadeOverlayOutUp
  fadeOut(10)

+host-styles(mp-drop-menu)
  display flex
  left 0
  margin-bottom 30px
  position absolute
  top 0
  z-index 100

+prefix-classes('mp-drop-menu-')
  .body, .body *
    box-sizing border-box

  .body
    background-color $white
    border-radius 5px
    mp-box-shadow()

  &.closed-down, &.closed-up
    display none

  &.opening-down
    animation fadeOverlayInDown 100ms forwards
    opacity 0
    
  &.opening-up
    animation fadeOverlayInUp 100ms forwards
    opacity 0

  &.open-down, &.open-up
    opacity 1

  &.closing-down
    animation fadeOverlayOutDown 100ms forwards

  &.closing-up
    animation fadeOverlayOutUp 100ms forwards

  .caret
    border 10px solid transparent
    border-bottom-color $white
    bottom 100%
    height 0
    margin-left -10px
    pointer-events none
    position absolute
    width 0

  .caret-inverted
    bottom initial
    top 100%
    transform rotate(180deg)