@import('../main/Detail/DetailVars.styl')

.root
  absolute top bottom left right
  left $note-detail-left-margin
  right $note-detail-right-margin
  height 100%
  background-color $ui-noteDetail-backgroundColor

.description
  absolute top left right
  height 80px
  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
  background-color $ui-noteDetail-backgroundColor

.tabList
  absolute left right
  top 80px
  box-sizing border-box
  height 30px
  display flex
  background-color $ui-noteDetail-backgroundColor

.tabList-item
  position relative
  flex 1
  overflow hidden
  &:hover
    background-color $ui-button--hover-backgroundColorg

.tabList-item--active
  @extend .tabList-item
  border-bottom $ui-border

.tabList-item-button
  width 100%
  height 29px
  overflow ellipsis
  text-align left
  padding-right 30px
  padding-left 10px
  border none
  background-color transparent
  transition 0.15s
  &:hover
    background-color $ui-button--hover-backgroundColor

.tabView
  absolute left right bottom
  top 130px

.tabView-content
  absolute top left right bottom
  box-sizing border-box
  height 100%
  width 100%

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

  .description-textarea
    background-color $ui-dark-noteDetail-backgroundColor
    color white

  .tabList
    background-color $ui-dark-noteDetail-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