@import('NoteDetailInfo')
@import('DetailVars')

.root
  absolute top right bottom
  border-left 1px solid alpha(#DEDEDE, 60%)
  background-color $ui-noteDetail-backgroundColor
  box-shadow none
  padding 20px 40px

.lock-button
  padding-bottom 3px

.control-lockButton
  top 150px
  topBarButtonRight()

.trashed-infopanel
  top 40px
  position relative

.control-fullScreenButton
  top 80px
  topBarButtonRight()

.body
  absolute left right
  left 0
  right 0
  top $info-height + $info-margin-under-border
  bottom $statusBar-height
  margin 0 45px
.body-noteEditor
  absolute top bottom left right

.mode-tab
  border 1px solid #eee
  height 34px
  display flex
  align-items center
  div
    width 40px
    height 100%
    background-color #f9f9f9
    display flex
    align-items center
    justify-content center
    cursor pointer
    &:first-child
      border-right 1px solid #eee
  .active
    background-color #fff
    box-shadow 2px 0px 7px #eee
    z-index 1
  
body[data-theme="white"]
  .root
    box-shadow $note-detail-box-shadow
    border none

body[data-theme="dark"]
  .root
    background-color $ui-dark-noteDetail-backgroundColor
    box-shadow none
    border-left 1px solid $ui-dark-borderColor

  .control-lockButton
    topBarButtonDark()

  .control-lockButton-tooltip
    darkTooltip()

  .control-fullScreenButton
    topBarButtonDark()

  .mode-tab
    border 1px solid #444444
    div
      background-color $ui-dark-noteDetail-backgroundColor
      &:first-child
        border-right 1px solid #444444
    .active
      background-color #3A404C
      box-shadow 2px 0px 7px #444444

body[data-theme="solarized-dark"]
  .root
    border-left 1px solid $ui-solarized-dark-borderColor
    background-color $ui-solarized-dark-noteDetail-backgroundColor

  .mode-tab
    border 1px solid #586E75
    div
      background-color $ui-solarized-dark-noteDetail-backgroundColor
      &:first-child
        border-right 1px solid #586E75
    .active
      background-color #002B36
      box-shadow 2px 0px 7px #222222