.root
  absolute top bottom left right
  width 100%
  height 100%

.description
  absolute top left right
  height 80px
  border-bottom $ui-border
  box-sizing border-box

.description-textarea
  display block
  height 100%
  width 100%
  resize none
  border none
  padding 10px
  line-height 1.6
  box-sizing border-box

.tabList
  absolute left right
  top 80px
  box-sizing border-box
  height 30px
  border-bottom $ui-border
  display flex
  background-color $ui-backgroundColor
.tabList-item
  position relative
  flex 1
  border-right $ui-border
.tabList-item--active
  @extend .tabList-item
  .tabList-item-button
    border-color $brand-color
.tabList-item-button
  width 100%
  height 29px
  navButtonColor()
  outline none
  border-left 4px solid transparent
.tabList-item-deleteButton
  position absolute
  top 5px
  height 20px
  right 5px
  width 20px
  text-align center
  border none
  padding 0
  color transparent
  background-color transparent
  border-radius 2px
.tabList-plusButton
  navButtonColor()
  width 30px
.tabView
  absolute left right bottom
  top 110px
.tabView-top
  absolute top left right
  height 30px
  border-bottom $ui-border
  display flex
  box-sizing border-box
.tabView-top-name
  flex 1
  border none
  padding 0 10px
  font-size 14px
.tabView-top-mode
  width 110px
  padding 0
  border none
  border-left $ui-border
  colorDefaultButton()
  color $ui-inactive-text-color
  pointer-events none
.tabView-content
  absolute left right bottom
  top 30px
  box-sizing border-box
  height 100%
  width 100%

body[data-theme="dark"]
  .description
    border-color $ui-dark-borderColor

  .description-textarea
    background-color $ui-dark-button--hover-backgroundColor
    color white

  .tabList
    background-color $ui-button--active-backgroundColor
    border-bottom-color $ui-dark-borderColor
    background-color $ui-dark-backgroundColor
  .tabList-item
    border-color $ui-dark-borderColor
    &:hover
      background-color $ui-dark-button--hover-backgroundColor
  .tabList-item--active
    border-color $ui-dark-borderColor
    .tabList-item-button
      border-color $brand-color
  .tabList-item-button
    navDarkButtonColor()
    border-left 4px solid transparent
  .tabList-plusButton
    navDarkButtonColor()

  .tabView-top
    border-color $ui-dark-borderColor
  .tabView-top-name
    border-color $ui-dark-borderColor
    color $ui-dark-text-color
    background-color $ui-dark-button--hover-backgroundColor
  .tabView-top-mode
    border-color $ui-dark-borderColor
    background-color $dark-default-button-background
    color $ui-dark-inactive-text-color
