@import './_variables.scss'

// Transition
.bottom-sheet-transition
  &-enter
    transform: translateY(100%)

  &-leave-to
    transform: translateY(100%)

// Block

.swipeable-bottom-sheet

  &.v-dialog
    align-self: flex-end
    border-radius: 0
    flex: 0 1 auto
    margin: 0
    overflow: visible

    &.swipeable-bottom-sheet--inset
      max-width: $bottom-sheet-inset-width

      @media #{map-get($display-breakpoints, 'xs-only')}
        max-width: none
    
    &.v-dialog:not(.v-dialog--fullscreen)
      max-height: 100%
      height: 100%
  
.swipeable-bottom-sheet__content
  align-items: center
  display: flex
  justify-content: center
  pointer-events: none
  position: absolute
  transition: .2s map-get($transition, 'fast-in-fast-out'), z-index 1ms
  width: 100%
  height: 100%
  outline: none
  inset: 0