@import('./Tab')
@import('./ConfigTab')

.root
  padding 15px
  white-space pre
  line-height 1.4
  color alpha($ui-text-color, 90%)
  width 100%
  font-size 14px

.group
  margin-bottom 45px

.group-header
  @extend .header
  color $ui-text-color

.group-header2
  font-size 20px
  color $ui-text-color
  margin-bottom 15px
  margin-top 30px

.group-section
  margin-bottom 20px
  display flex
  line-height 30px

.group-section-label
  width 150px
  text-align left
  margin-right 10px
  font-size 14px

.group-section-control
  flex 1
  margin-left 5px

.group-section-control select
  outline none
  border 1px solid $ui-borderColor
  font-size 16px
  height 30px
  width 250px
  margin-bottom 5px
  background-color transparent

.group-section-control-input
  height 30px
  vertical-align middle
  width 400px
  font-size $tab--button-font-size
  border solid 1px $border-color
  border-radius 2px
  padding 0 5px
  outline none
  &:disabled
    background-color $ui-input--disabled-backgroundColor

.group-control-button
  height 30px
  border none
  border-top-right-radius 2px
  border-bottom-right-radius 2px
  colorPrimaryButton()
  vertical-align middle
  padding 0 20px

.group-checkBoxSection
  margin-bottom 15px
  display flex
  line-height 30px
  padding-left 15px

.group-control
  padding-top 10px
  box-sizing border-box
  height 40px
  text-align right
  :global
    .alert
      display inline-block
      position absolute
      top 60px
      right 15px
      font-size 14px
    .success
      color #1EC38B
    .error
      color red
    .warning
      color #FFA500

.snippet-list
  width 30%
  height calc(100% - 200px)
  position absolute

  .snippets
    height calc(100% - 8px)
    overflow scroll
    background: #f5f5f5

  .snippet-item
    height 50px
    font-size 15px
    line-height 50px
    padding 0 5%
    cursor pointer
    position relative

    &::after
      width 90%
      height 1px
      background rgba(0, 0, 0, 0.1)
      position absolute
      top 100%
      left 5%
      content ''

    &:hover
      background darken(#f5f5f5, 5)

  .snippet-item-selected
    @extend .snippet-list .snippet-item
    background darken(#f5f5f5, 5)

.snippet-detail
  width 70%
  height calc(100% - 200px)
  position absolute
  left 33%

.SnippetEditor
  position absolute
  width 100%
  height 90%

body[data-theme="default"], body[data-theme="white"]
  .snippets
    background $ui-backgroundColor
    .snippet-item
      color black
      &::after
        background $ui-borderColor
      &:hover
        background darken($ui-backgroundColor, 5)
    .snippet-item-selected
      background darken($ui-backgroundColor, 5)

body[data-theme="dark"]
  .snippets
    background $ui-dark-backgroundColor
    .snippet-item
      color white
      &::after
        background $ui-dark-borderColor
      &:hover
        background darken($ui-dark-backgroundColor, 5)
    .snippet-item-selected
      background darken($ui-dark-backgroundColor, 5)
  .snippet-detail
    color white
  .group-control-button
    colorDarkPrimaryButton()

body[data-theme="solarized-dark"]
  .snippets
    background $ui-solarized-dark-backgroundColor
    .snippet-item
      color white
      &::after
        background $ui-solarized-dark-borderColor
      &:hover
        background darken($ui-solarized-dark-backgroundColor, 5)
    .snippet-item-selected
      background darken($ui-solarized-dark-backgroundColor, 5)
  .snippet-detail
    color white
  .group-control-button
    colorSolarizedDarkPrimaryButton()

body[data-theme="monokai"]
  .snippets
    background $ui-monokai-backgroundColor
    .snippet-item
      color White
      &::after
        background $ui-monokai-borderColor
      &:hover
        background darken($ui-monokai-backgroundColor, 5)
    .snippet-item-selected
      background darken($ui-monokai-backgroundColor, 5)
  .snippet-detail
    color white
  .group-control-button
    colorMonokaiPrimaryButton()