$sideTrayWidth = 420px

.sideTray
  box-sizing: border-box
  right: 0
  top: 0
  bottom: 0
  width: $sideTrayWidth
  height: 100%
  overflow: hidden
  background: white
  $commonBoxShadow()
  display: block
  transform: translate3d(101%, 0px, 0) // 101% for hiding box shadow
  transition: transitTransform(.3s), transit('background')
  padding 0
  &.cover
    position: absolute

  &.global
    position: fixed

  &.peek
    transform: translate3d($sideTrayWidth - 20, 0px, 0)

  &.hasScrollRemaining
    .footer
      $commonBoxShadow(0.4)

  &.show
    transform: translate3d(0, 0, 0)

  &.peek:not(.show)
    .backSplashContainer
      transition-delay: 1s
      transition: transit('opacity')
      opacity: 1
    .backSplash
      background: tint($secondary, 100)
      cursor: pointer
      pointer-events: auto
      &:hover
        background: tint($secondary, 90)
      &:active
        background: tint($secondary, 85)

.backSplashContainer
  transition: none
  pointer-events: none
  opacity: 0
  position: absolute
  z-index: 1
  width: 100%
  height: 100%
.backSplash
  transition: transit('background')
  background: tint($secondary, 100)
  width: 100%
  height: 100%
  .openArrow
    position: absolute
    top: 50%
    left: 5px
    font-size:14px
    margin-top: -7px

.backButton
  position: absolute
  top: 30px
  left: 10px
  z-index: 1

.closeButton
  position: absolute
  top: 30px
  right: 20px
  z-index: 1

.sideTrayHeader
  .title
    margin-top: 0px
    margin-bottom: 10px
    text-align: center
    font-size: 32px
    font-weight: $bold

    .icon
      font-size: 30px
      color: $themeColor
      vertical-align: middle
      margin-right: 6px

    > strong
      vertical-align: middle

  .subTitle
    margin-top: 10px
    margin-bottom: 30px
    text-align: center
    font-size: 20px
    font-weight: $light

.content
  height: 100%
  overflow: auto
  -webkit-overflow-scrolling: touch

.body
  .bodyContent
    padding 20px 10px

.footer
  position: sticky
  bottom: 0px
  left: 0px
  right: 0px
  height: 80px
  background: white
  transition: transit('box-shadow')
  $commonBoxShadow(0)

.footerContent
  width:100%
  height:100%
  display: flex
  box-sizing: border-box
  align-items: center
  justify-content: center
  padding: 0 10px

  > *
    margin: 0 10px