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          : 315px
  width           : 85px

  &:not(.active):hover
    .thesis-button.add, .thesis-button.delete
      opacity        : 1
      pointer-events : auto

      &.add
        bottom: 85px

      &.delete
        bottom: 155px

  //
  // in edit mode
  // --------------------------------------------------------------------------
  &.active
    .thesis-button
      opacity        : 1
      pointer-events : auto

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

      i
        +transform(rotate(-45deg))

      i:before
        +transform(rotate(45deg))

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

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

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

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

      i, i::before
        +transform(rotate(0deg))

    i
      +transition(transform .5s ease-in-out, background-color .3s ease-in-out)
      +transform-origin(50% 50%)
      +transform(rotate(0deg))
      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

      &:before
        display: block
        +transition(transform .3s ease-in-out)
        +transition-delay(.5s)
        +transform-origin(50% 50%)
        +transform(rotate(0deg))

      &: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)