@import '../bootstrap'

.dialog
  elevation(24)
  border-radius: $card-border-radius
  margin: 24px
  overflow-y: auto
  pointer-events: auto
  transition: .3s ease-in-out
  width: 100%
  z-index: inherit

  &__content
    align-items: center
    display: flex
    height: 100%
    justify-content: center
    left: 0
    pointer-events: none
    position: fixed
    top: 0
    transition: .3s ease-in-out
    width: 100%
    z-index: 6
    outline: none

  &:not(.dialog--fullscreen)
    max-height: 90%

  &__container
    display: inline-block
    vertical-align: middle

  &--fullscreen
    margin 0
    height 100%
    position fixed
    overflow-y: auto
    top: 0
    left 0

    > .card
      min-height 100%
      min-width 100%
      margin 0 !important
      padding 0 !important

  &--scrollable
    display: flex

    > .card
      display: flex
      flex: 1 1 auto
      flex-direction: column

      > .card__title
      > .card__actions
        flex: 1 0 auto

      > .card__text
        overflow-y: auto
        backface-visibility: hidden