thesis

body.thesis-tray-open
  #thesis-editor
    right: 380px

#thesis-editor
  +transition(right .3s ease-in-out)
  display         : block
  position        : absolute
  right           : 0
  bottom          : 0
  z-index         : 1040
  position        : fixed
  z-index         : 1040
  color           : white
  line-height     : 0
  font-size       : 0
  text-decoration : none
  height          : 85px
  width           : 85px

  &.active
    .thesis-button
      +curve_buttons(4)
      opacity        : 1
      pointer-events : auto

      &.edit i
        +barber_pole(darken($gray, 8%), rgba(white, .25))

  // ENABLE when add/delete buttons are addded
  // &.thesis-page-tools-hidden
  //   height: 300px

  //   &:hover
  //     .thesis-button
  //       &.add, &.delete
  //         +curve_buttons(6)
  //         +transition-duration(.3s)
  //         +keyframes (animateOpacity)
  //           from
  //             opacity: 0
  //           to
  //             opacity: 1
  //         +animation( animateOpacity .75s ease-in-out )
  //         opacity        : 1
  //         pointer-events : auto

  .thesis-button
    +editor_icons(("cancel": $orange, "delete": $pink, "add": $blue, "save": $green, "settings": $yellow ))
    +transition(opacity .75s ease-in-out, right .75s ease-in-out, transform .75s ease-in-out)
    +transform-origin(0% 100%)
    right          : 15px
    opacity        : 0
    display        : block
    float          : right
    clear          : both
    text-align     : right
    position       : relative
    cursor         : pointer
    padding        : 0px 0px
    height         : 80px
    width          : auto
    padding-bottom : 20px
    pointer-events : none
    position       : absolute

    @for $i from 2 to 10
      &:nth-last-child(#{$i})
        $modifier: $i - 1
        bottom: $modifier * 80 - 5 + px

    &:hover
      .tooltip
        right   : 80px
        opacity : 1

    &.edit
      opacity        : 1 !important
      height         : 60px !important
      padding-bottom : 0px !important
      pointer-events : auto !important
      bottom         : 15px
      right          : 15px

    i
      position         : relative
      z-index          : 2
      width            : 60px
      height           : 60px
      display          : inline-block
      background-color : $gray
      border           : 3px solid white
      font-size        : 30px
      line-height      : 55px
      text-align       : center
      vertical-align   : middle
      font-family      : $fontawesome
      color            : white
      +transition(background-color .3s ease-in-out)

      &:hover
        background-color: darken($gray, 8%)
        +transition(background-color .3s ease-in-out)

    .tooltip
      +transition(opacity .2s ease-out, right .2s ease-out)
      z-index        : 1
      position       : absolute
      right          : 0px
      top            : 17px
      font-size      : 13px
      color          : white
      background     : rgba(black, .70)
      padding        : 5px 15px 4px
      line-height    : 1
      opacity        : 0
      text-transform : uppercase
      letter-spacing : 1px
      vertical-align : middle
      display        : inline-block
      font-weight    : normal
      border         : 2px solid white
      white-space    : nowrap
      pointer-events : none

      &:before
        content  : ""
        display  : block
        position : absolute
        right    : -25px
        width    : 40px
        height   : 60px
        top      : -19px
        z-index  : 0

      &.error
        background : rgba(darken(red, 20%), .75)