@import('./ConfigTab.styl')

.icon-space
  margin 20px 0
  height 100px

.icon
  display inline-block
  vertical-align middle

.icon-right
  display inline-block
  vertical-align middle
  margin-left 20px

.appId
  font-size 24px
  margin-bottom 13px

.description
  font-size 14px

.list
  list-style square
  padding-left 2em
  li
    white-space normal
    padding-bottom 10px
  a
    color #4E8EC6
    text-decoration none

.separate-line
  margin 40px 0

.subscription-email-input
  height 35px
  vertical-align middle
  width 200px
  font-size $tab--button-font-size
  border solid 1px $border-color
  border-radius 2px
  padding 0 5px
  margin-right 5px
  outline none
  &:disabled
    background-color $ui-input--disabled-backgroundColor

.subscription-submit-button
  margin-top 10px
  height 35px
  border-radius 2px
  border none
  background-color alpha(#1EC38B, 90%)
  padding-left 20px
  padding-right 20px
  text-decoration none
  color white
  font-weight 600
  font-size 16px
  &:hover
    background-color #1EC38B
    transition 0.2s

.policy-submit
  margin-top 10px
  height 35px
  border-radius 2px
  border none
  background-color alpha(#1EC38B, 90%)
  padding-left 20px
  padding-right 20px
  text-decoration none
  color white
  font-weight 600
  font-size 16px
  &:hover
    background-color #1EC38B
    transition 0.2s

.policy-confirm
  margin-top 10px
  font-size 12px

body[data-theme="dark"]
  .root
    color alpha($tab--dark-text-color, 80%)
  .appId
    color $ui-dark-text-color


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

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

for theme in $themes
  apply-theme(theme)