$mainViewTransitionTime = 0.4s

.entriesView
  position relative
  width 100%
  height 100%
  
  & > div
    display flex
    flex-direction row
    justify-content space-around
    align-items stretch
    overflow hidden
    height 100%
    width 100%
  
  .timeline
    width 30%
    height 100%
    overflow-y scroll
    border-right 1px solid $gray
    transitionAbove $width-xs all $mainViewTransitionTime
      
    
  .toggle-timeline
    position absolute
    top 0.7em
    border none
    background-color $white
    color $gray
    padding 0
    font-size inherit
    font-family inherit
    transition color 0.3s linear
    transitionAbove $width-xs left $mainViewTransitionTime
    z-index 2

    &:hover
      color $black

    span
      font-family 'FontAwesome'    
      font-style normal
      font-weight normal
      line-height 1
      -webkit-font-smoothing antialiased
      
      &:before
        content $fa-var-chevron-left
        
    &.closed
      span:before
        content $fa-var-chevron-right


  .emptyEditor
    background-color $gray-light
    height 100%    
    color $gray
    font-family $body-font
    font-style italic
    padding 3em 1em
    transitionAbove $width-xs width $mainViewTransitionTime


  .entryEditor
    height 100%
    transitionAbove $width-xs width $mainViewTransitionTime
  
    

  &.split
    .timeline
      width 30%
      opacity 1
    .emptyEditor, .entryEditor
      width 70%
    .toggle-timeline
      left 32%

  &.noTimeline
    .timeline
      width 0
      opacity 0
    .emptyEditor, .entryEditor
      width 100%
    .toggle-timeline
      left 2%
      

  +below($width-xs)
    .toggle-timeline
      display none
    &.split
      .timeline
        width 100%
        opacity 1
      .entryEditor, .emptyEditor
        width 0
        padding 0
      &.entrySelected
        .timeline, .emptyEditor
          width 0
          opacity 0
        .entryEditor
          width 100%


