@import('./Tab')

.container
  display flex
  flex-direction column
  align-items center
  justify-content center
  position relative
  margin-bottom 2em
  margin-left 2em

.box-minmax
  width 608px
  height 45px
  display flex
  justify-content space-between
  font-size $tab--button-font-size
  color $ui-text-color
  span first-child
  margin-top 18px
  padding-right 10px
  padding-left  10px
  padding-top 8px
  position relative
  border $ui-borderColor
  border-radius 5px
  background $ui-backgroundColor

div[id^="secondRow"]
  position absolute
  z-index 2
  left 0
  top 0
  margin-bottom -42px
  .rs-label
    margin-left -20px
  
div[id^="firstRow"]
  position absolute
  z-index 2
  left 0
  top 0
  margin-bottom -25px
  .rs-range
      &::-webkit-slider-thumb
        margin-top 0px
        transform rotate(180deg)
  .rs-label
    margin-bottom -85px
    margin-top 85px
  

.rs-range
  margin-top 29px
  width 600px
  -webkit-appearance none
  &:focus
    outline black
  &::-webkit-slider-runnable-track
    width 100%
    height 0.1px
    cursor pointer
    box-shadow none
    background $ui-backgroundColor
    border-radius 0px
    border 0px solid #010101
    cursor none
    
  &::-webkit-slider-thumb
    box-shadow none
    border 1px solid $ui-borderColor
    box-shadow 0px 10px 10px rgba(0, 0, 0, 0.25)
    height 32px
    width 32px
    border-radius 22px
    background white
    cursor pointer
    -webkit-appearance none
    margin-top -20px
    border-color $ui-default-button-backgroundColor
    height 32px
    border-top-left-radius 10%
    border-top-right-radius 10%

.rs-label
  position relative
  transform-origin center center
  display block
  background transparent
  border-radius none
  line-height 30px
  font-weight normal
  box-sizing border-box
  border none
  margin-bottom -5px
  margin-top -10px
  clear both
  float left
  height 17px
  margin-left -25px
  left attr(value)
  color $ui-text-color
  font-style normal
  font-weight normal
  line-height normal
  font-size $tab--button-font-size
.root
  padding 15px
  margin-bottom 30px

.group
  margin-bottom 45px

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

.group-header2
  font-size 20px
  margin-bottom 15px
  margin-top 30px

.group-header--sub
  @extend .group-header
  margin-bottom 10px

.group-header2--sub
  @extend .group-header2
  margin-bottom 10px

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

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

.group-section-label-right
  width 200px
  text-align right
  margin-right 10px
  font-size 14px
  padding-right 1.5rem

.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 fixed
      top 130px
      right 100px
      font-size 14px
    .success
      color #1EC38B
    .error
      color red
    .warning
      color #FFA500

.group-control-leftButton
  colorDefaultButton()
  border none
  border-radius 2px
  font-size $tab--button-font-size
  height $tab--button-height
  padding 0 15px
  margin-right 10px

.group-control-rightButton
  position fixed
  top 80px
  right 100px
  colorPrimaryButton()
  border none
  border-radius 2px
  font-size $tab--button-font-size
  height 40px
  width 120px
  padding 0 15px

.group-hint
  border $ui-border
  padding 10px 15px
  margin 15px 0
  border-radius 2px
  background-color $ui-backgroundColor
  color $ui-inactive-text-color
  ul
    list-style inherit
    padding-left 1em
    line-height 1.2
  p
    line-height 1.2

.note-for-keymap
  font-size: 12px

.code-mirror
  width 400px
  height 120px
  margin 5px 0
  font-size 12px

colorDarkControl()
  border-color $ui-dark-borderColor
  background-color $ui-dark-backgroundColor
  color $ui-dark-text-color

colorThemedControl(theme)
  border none
  background-color get-theme-var(theme, 'button-backgroundColor')
  color get-theme-var(theme, 'text-color')

body[data-theme="default"],
body[data-theme="white"]
  .root
      color $ui-text-color

  .group-header2
      color $ui-text-color

body[data-theme="dark"]
  .root
    color $ui-dark-text-color

  .group-header
  .group-header--sub
    color $ui-dark-text-color
    border-color $ui-dark-borderColor

  .group-header2
  .group-header2--sub
    color $ui-dark-text-color

  .group-section-control-input
    border-color $ui-dark-borderColor

  .group-control
    border-color $ui-dark-borderColor
  .group-control-leftButton
    colorDarkDefaultButton()
    border-color $ui-dark-borderColor
  .group-control-rightButton
    colorDarkPrimaryButton()
  .group-hint
    colorDarkControl()
  .group-section-control
    select, .group-section-control-input
      colorDarkControl()
  .rs-label
    color $ui-dark-text-color


apply-theme(theme)
  body[data-theme={theme}]
    .root
      color get-theme-var(theme, 'text-color')

    .group-header
    .group-header--sub
      color get-theme-var(theme, 'text-color')
      border-color get-theme-var(theme, 'borderColor')

    .group-header2
    .group-header2--sub
      color get-theme-var(theme, 'text-color')

    .group-section-control-input
      border-color get-theme-var(theme, 'borderColor')

    .group-control
      border-color get-theme-var(theme, 'borderColor')
    .group-control-leftButton
      colorDarkDefaultButton()
      border-color get-theme-var(theme, 'borderColor')
    .group-control-rightButton
      colorThemedPrimaryButton(theme)
    .group-hint
      colorThemedControl(theme)
    .group-section-control
      select, .group-section-control-input
        colorThemedControl(theme)
    .rs-label
      color get-theme-var(theme, 'text-color')

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

for theme in $themes
  apply-theme(theme)