html, body
  height 100%

body
  background white
  margin 0
  font-family 'ProximaNova-Semibold'

@import './colors'
@import './tooltips'
@import './copied-from-old-style'
@import './preview'
@import './footer'
@import './skin'
@import './content'
@import './details'
@import './embed'
@import './full-editor'
@import './login-popup'
/*! blogvio_editor/editor/index.styl */

s_d = .4s
.editor
  width 490px
  background #fff
  box-shadow 0 1px 2px 0 rgba(0,0,0,.1), 0 0 3px 0 rgba(0,0,0,.1)
  border-radius 4px
  z-index 2
  user-select none
  overflow hidden
  &.dragging
    opacity 0.85
  .editor-container
    border-radius 4px 4px 0 0
    height 510px
    overflow hidden
    position relative
    background-color #fff
    transform translate3d(0,0,0)
    & > .activateable
      visibility hidden
      z-index -1
      position absolute
      left 0
      right 0
      top 0
      bottom 0
      overflow hidden
      border-radius 4px 4px 0 0
      transition opacity .45s ease .001s, z-index .001s ease .3s, left s_d ease, right s_d ease, visibility .001s ease s_d
      &:last-child
        z-index 1
      &.active
        transition opacity .45s ease .001s, z-index .001s ease .3s, left s_d ease, right s_d ease, visibility .001s ease .001s
        visibility visible
        z-index 0
    .embedder
      overflow visible
  &:not([current-view])
    overflow hidden
    .editor-container > .activateable:first-child
      visibility hidden
      opacity 0
    .presets-list
      opacity 0
  &[current-view]
    .editor-container > .activateable:first-child
      opacity 1
      visibility visible
      z-index 0
      right -1px
    .presets-list
      opacity 1
      transition opacity .45s ease .45s

  &:hover
  &.dragging
    .editor-drag-button
      left 470px
      top -10px
      width 30px
      height 30px
      &:before
        opacity 1
  &[current-view='skin']
  &[current-view='details']
  &[current-view='content'][content-browser-auth='true']
    .editor-drag-button
      background #fafafa
  &[current-view='content'][notification-visible='true']
    .editor-drag-button
      background #fffae7

  /* editor's panels' sliding animations */
  &[current-view='skin'] .editor-container
    > .activateable:first-child
      right -1px
    > .activateable:nth-child(n+2)
      right -490px
      left 490px
  &[current-view='content'] .editor-container
    > .activateable:nth-child(1)
      right 490px
      left -490px
    > .activateable:nth-child(3)
      right -490px
      left 490px
  &[current-view='details'] .editor-container
    overflow visible
    z-index 1
    > .activateable:nth-child(-n+2)
      right 490px
      left -490px
  &[current-view='save'] .editor-container
    overflow visible
    z-index 1
    > .activateable:nth-child(-n+2)
      right 490px
      left -490px
    > .activateable:nth-child(3)
      visibility visible
  &[current-view='save']:not(.anonymous-user) .editor-container
    .active > .save-editor_overlay
      opacity 1
