@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
  overflow hidden

.lock-button
  padding-bottom 3px

.control-lockButton
  topBarButtonRight()
  position absolute
  right 265px
  &:hover .tooltip
    opacity 1

  .tooltip
    tooltip()
    position absolute
    pointer-events none
    top 35px
    right -10px
    width 50px
    z-index 200
    padding 5px
    line-height normal
    border-radius 2px
    opacity 0
    transition 0.1s

.trashed-infopanel
  position relative

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

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()

apply-theme(theme)
  body[data-theme={theme}]
    .root
      border-left 1px solid get-theme-var(theme, 'borderColor')
      background-color get-theme-var(theme, 'noteDetail-backgroundColor')

for theme in 'solarized-dark' 'dracula'
  apply-theme(theme)

for theme in $themes
  apply-theme(theme)