.root
  absolute top bottom right
  display flex
  align-items center
  justify-content center

.empty
  height 320px
  display flex
  align-items center

.empty-message
  width 100%
  font-size 36px
  font-weight 600
  line-height 56px
  text-align center
  color $ui-inactive-text-color

body[data-theme="dark"]
  .root
    background-color $ui-dark-backgroundColor
    border-left 1px solid $ui-dark-borderColor
  .empty-message
    color $ui-dark-inactive-text-color

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

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

for theme in $themes
  apply-theme(theme)