$box-shadow: 1px 1px 7px 1px rgba(0,0,0,.2) !default

.q-zoom
  position: relative
  padding: 0
  margin: 0

  &__zoom-in
    cursor: zoom-in

  &__zoom-out
    cursor: zoom-out

  &__overlay
    position: fixed
    transition: all .5s linear
    left: 0
    top: 0
    width: 100%
    height: 100%
    background-color: transparent
    padding: 0
    margin: 0
    z-index: 6000
    overflow: hidden

  &__content
    position: absolute
    display: flex
    align-items: center
    justify-content: center
    transition: all .5s cubic-bezier(.2,0,.2,1)
    text-align: center
    width: 100%
    height: 0
    max-width: 100%
    max-height: 100%
    overflow: hidden

    & > *
      max-width: 100%
      max-height: 100%

  &__content-inner
    display: inline-flex
    align-items: center
    justify-content: center
    max-width: 100%
    max-height: 100%

  &__close-button
    position: absolute
    top: 24px
    right: 24px
    width: 56px
    height: 56px
    display: inline-flex
    align-items: center
    justify-content: center
    border: 0
    border-radius: 999px
    background: rgba(255,255,255,.12)
    color: #fff
    cursor: pointer
    z-index: 6001
    box-shadow: $box-shadow
    backdrop-filter: blur(8px)

  &__close-icon
    font-size: 34px
    line-height: 1

  &__no-center
    text-align: unset
    vertical-align: unset

  &__no-scroll
    overflow: hidden
