@import('./Tab')
  
.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-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)
  background #f5f5f5
  position absolute

  .snippet-item
    width 100%
    height 50px
    font-size 20px
    line-height 50px
    padding 0 10px
    cursor pointer

    &:hover
      background darken(#f5f5f5, 5)

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