@import('./ConfigTab')

.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 67%
  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)

apply-theme(theme)
  body[data-theme={theme}]
    .snippets
      background get-theme-var(theme, 'backgroundColor')
      .snippet-item
        color get-theme-var(theme, 'text-color')
        &::after
          background get-theme-var(theme, 'borderColor')
        &:hover
          background darken(get-theme-var(theme, 'backgroundColor'), 5)
      .snippet-item-selected
        background darken(get-theme-var(theme, 'backgroundColor'), 5)
    .snippet-detail
      color get-theme-var(theme, 'text-color')
    .group-control-button
      colorThemedPrimaryButton(theme)

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

for theme in $themes
  apply-theme(theme)