thesis

body.thesis-tray-open
  left       : -380px
  overflow-x : hidden

  #thesis-tray
    left  : auto
    right : 0

#thesis-tray
  +transition(right .3s ease-in-out)
  position   : fixed
  width      : 380px
  height     : 100%
  right      : -380px
  bottom     : 0
  background : white
  z-index    : 1039
  @extend %form-styles

  &:after
    content        : ""
    position       : absolute
    top            : 0
    left           : 0
    height         : 100%
    width          : 6px
    z-index        : 10
    pointer-events : none
    +linear-gradient(left, rgba(black, .2), white)
    background-color : white

  .attribution
    position    : absolute
    bottom      : 0
    left        : 0
    width       : 100%
    line-height : 40px
    font-size   : 13px
    text-align  : center
    font-weight : 300
    background  : white

    a
      font-weight : 600
      position    : relative
      color       : $ir-red
      display     : inline-block
      line-height : 40px

      &:after
        +transition(opacity .2s ease-in-out)
        opacity       : 0
        content       : ""
        border-bottom : 2px solid $ir-red
        width         : 14px
        position      : absolute
        bottom        : 8px
        left          : 50%
        margin-left   : -7px

      &:hover
        text-decoration : none
        color           : $ir-red
        &:after
          opacity: 1

  .tray-container
    width          : 100%
    height         : 100%
    overflow       : scroll
    padding-bottom : 40px
    +display(flex)
    +flex-direction( row )

  .tray-wrap
    margin        : auto
    width         : 100%
    text-align    : right
    padding       : 40px

  .tray-title
    text-align     : right
    border-bottom  : 1px solid $gray
    padding-bottom : 5px
    font-size      : 15px
    font-weight    : 300
    text-transform : uppercase
    line-height    : 1
    letter-spacing : 1.5px
    margin-bottom  : 25px

  .tray-image-preview
    background-size     : contain
    background-position : center
    background-repeat   : no-repeat
    height              : 160px
    border              : 8px solid white
    box-shadow          : 0 0 0 1px rgba(160, 161, 166, 0.35)

  .tray-file-upload
    background     : rgba($gray, .15)
    display        : block
    cursor         : pointer
    height         : 55px
    padding        : 0px 10px 0 0
    width          : 100%
    white-space    : nowrap
    overflow       : hidden
    text-overflow  : ellipsis

    &, span
      line-height    : 55px
      font-size      : 15px
      font-weight    : 400
      text-align     : left
      vertical-align : middle
      text-transform : none

    span
      display: inline

    &:hover:before
      background   : rgba($gray, .65)

    &:before
      +transition(background .2s ease-in-out)
      +size( 55px )
      content        : "\f0ee"
      background     : rgba($gray, .5)
      display        : inline-block
      margin-right   : 10px
      font-family    : $fontawesome
      color          : white
      font-size      : 33px
      text-align     : center
      vertical-align : middle

    input
      display: none

// ENABLE when add/delete buttons are addded
// #thesis-tray.page-settings
//   button.thesis-tray-cancel
//     background : $orange

//     &:hover
//       background: darken($orange, 8%)

//   button.thesis-tray-save
//     background : $green

//     &:hover
//       background: darken($green, 8%)