$left-pane-width= 275px


$pane-border-color= $border-color
$snippet-list-border-color= $border-color
$snippet-list-item-hover-bg= #EEE
$snippet-list-active-color= white
$snippet-list-active-bg= $brand-primary

.snippets-list-state
  position: absolute
  top:0
  left:0
  right:0
  bottom:0
  .left-pane
    border-right 1px solid $baseBorderColor
    position: absolute
    top: 0
    bottom: 0
    left: 0
    width: $left-pane-width
    overflow:hidden
    .snippet-search
      position: absolute
      top: 0
      height: 50px
      left: 0
      right: 0
      border-right 1px solid $baseBorderColor
      padding: 7px 5px

    .snippet-list
      position: absolute
      top: 50px
      bottom: 0
      left: 0
      right: 0
      overflow-x: hidden
      overflow-y: auto
      list-style: none
      padding: 0
      li
        cursor: pointer
        padding: 5px
        border-right 1px solid $baseBorderColor
        border-bottom 1px solid $baseBorderColor
        &:nth-child(even)
          background-color $baseBackgroundColor
        &:nth-child(odd)
          background-color lighten($baseBackgroundColor, 2%)
        h4
          margin: 0

        &:hover
          background-color: $backgroundColorSelected

        p
          margin:0

        p.call-sign
          font-size:0.8em

        p.created-at
          font-size:0.8em
          opacity: 0.8

        &.active
          color: $snippet-list-active-color
          background-color: $snippet-list-active-bg
          a
            color: white





  .right-pane
    position: absolute
    top: 0
    bottom: 0
    left: $left-pane-width
    right: 0
    overflow-x: hidden
    overflow-y: auto
    background-color lighten($baseBackgroundColor, 2%)



.snippets-detail-state
  position absolute
  top 0
  width 100%
  bottom 0
  overflow hidden
  .detail-header
    position absolute
    top 0
    width 100%
    background-color lighten($baseBackgroundColor, 5%)
    padding 5px 10px
    height 50px
    border-bottom solid 1px $baseBorderColor
    .detail-header-title
      color $textColorHighlight
      line-height 40px
      font-size 1.2em
      small
        font-size: 0.6em
        color $textColor


    .detail-header-control
      padding 3px

  .detail-body
    position absolute
    top 50px
    width 100%
    bottom 0
    padding 5px 10px
    overflow-y auto
    .ace_editor
      min-height 300px
      border solid 1px $border-color
      border-radius 5px
      margin-bottom 5px

.tags
  word-break: break-all
  a
    margin: 0 2px