thesis

#thesis-editor
  display         : block
  position        : absolute
  right           : 15px
  bottom          : 15px
  z-index         : 1040
  position        : fixed
  z-index         : 1040
  color           : white
  line-height     : 0
  font-size       : 0
  text-decoration : none

  .thesis-button
    @include editor_icons(("cancel": $orange, "delete": $pink, "add": $blue, "save": $green, "settings": $yellow ))
    @include transition(opacity .75s ease-in-out, right .75s ease-in-out, transform .75s ease-in-out, padding .001s linear .75s, height .001s linear .75s)
    right         : 0
    opacity       : 0
    display       : block
    float         : right
    clear         : both
    text-align    : right
    position      : relative
    cursor        : pointer
    padding       : 0px 0px
    height        : 0px
    width         : auto
    margin-bottom : 20px

    &.edit
      opacity       : 1
      height        : 60px
      margin-bottom : 0px

    &:hover

      .tooltip
        right          : 80px
        opacity        : 1
        pointer-events : auto

    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
      @include transition(background-color .3s ease-in-out)

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

    .tooltip
      @include transition(opacity .2s ease-out, right .2s ease-out)
      z-index        : 1
      position       : absolute
      right          : 0px
      top            : 50%
      margin-top     : -13px
      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
        left       : 100%
        width      : 30px
        height     : 60px
        top        : -19px

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


body.thesis-editing #thesis-editor
  .thesis-button
    &.edit
      i
        @include barber_pole(darken($gray, 8%), rgba(white, .25))

  &.active
    .thesis-button
      @include curve_buttons(6)
      @include transition(opacity .75s ease-in-out, right .75s ease-in-out, transform .75s ease-in-out)
      opacity  : 1
      height   : 60px