@import('./Tab')

top-bar--height = 50px

.root
  modal()
  max-width 100vw
  min-height 100vh
  height 100vh
  width 100vw
  overflow hidden
  position relative

.top-bar
  absolute top left right
  height top-bar--height
  background-color $ui-backgroundColor
  border-bottom solid 1px $ui-borderColor
  p
    text-align center
    font-size 18px
    line-height top-bar--height

.nav
  absolute top left right
  top top-bar--height
  left 0
  width 170px
  margin-left 10px
  margin-top 20px
  background-color $ui-backgroundColor

.nav-button
  font-size 14px
  text-align left
  width 150px
  margin 5px 0
  padding 7px 0
  padding-left 10px
  border none
  border-radius 2px
  background-color transparent
  color $ui-text-color
  font-size 16px
  .saving--warning
    haveToSave()

.nav-button--active
  @extend .nav-button
  color $ui-text-color
  background-color $ui-button--active-backgroundColor
  &:hover
    color $ui-text-color
  .saving--warning
    haveToSave()

.nav-button-icon
  display block

.content
  absolute left right bottom
  top top-bar--height
  left 170px
  margin-top 10px
  overflow-y auto

apply-theme(theme)
  body[data-theme={theme}]
    .root
      background-color transparent
    .top-bar
      background-color transparent
      border-color get-theme-var(theme, 'borderColor')
      p
        color get-theme-var(theme, 'text-color')
    .nav
      background-color transparent
      border-color get-theme-var(theme, 'borderColor')
    .nav-button
      background-color transparent
      color get-theme-var(theme, 'text-color')
      &:hover
        color get-theme-var(theme, 'text-color')

    .nav-button--active
      @extend .nav-button
      color get-theme-var(theme, 'button--active-color')
      background-color get-theme-var(theme, 'button--active-backgroundColor')

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

for theme in $themes
  apply-theme(theme)