@import '../bootstrap'

.menu
  display: inline-block
  position: relative
  vertical-align: middle

  &--disabled
    cursor: default

    .menu__activator,
    .menu__activator > *
      cursor: default
      pointer-events: none

  &__activator
    align-items: center
    cursor: pointer
    height: inherit
    position: relative

    input[readonly]
      cursor: pointer

  &__content
    position: absolute
    display: inline-block
    border-radius: 2px
    max-width: 80%
    overflow-y: auto
    overflow-x: hidden
    contain: content
    // This is required for an issue on Chrome 65
    // that prevents scrolling after a menu is opened
    will-change: transform
    elevation(8)

    &--active
      pointer-events: none

    &--dropdown
      border-top-left-radius: 0
      border-top-right-radius: 0
      border-top: 1px solid $material-light.dividers

    & > .card
      contain: content
      backface-visibility: hidden

  > .menu__content
    max-width: none

  &-transition
    &-enter
      .list__tile
        min-width: 0
        transition-delay: .4s
        opacity: 0
        transform: translateY(-15px)
        pointer-events: none

    &-enter-to
      .list__tile
        pointer-events: auto
        opacity: 1

      .list__tile--active
        transform: none !important

    &-leave-to
      transform: translateY(-10px)

    &-leave-active, &-leave-to
      pointer-events: none

    &-enter, &-leave-to
      opacity: 0

    &-enter-to, &-leave
      opacity: 1

    &-enter-active, &-leave-active
      transition: all .5s $transition.swing

.menu-transition-enter
  &.menu__content--auto
    .list__tile--active
      opacity: 1
      transform: none !important
      pointer-events: auto