// NOTE: You can't use @extend for component independent and topdoc parsing.

// global variables
var-input-bg-color = $background-color
var-input-border-color = $border-color
var-input-text-color = $text-color
var-input-placeholder-color = $sub-text-color
var-input-invalid-border-color = $border-color
var-input-invalid-text-color = $text-color

// Font
var-font-size = 17px
var-font-weight = 400
var-letter-spacing = 0
var-text-color = $text-color
var-font-size--mini = var-font-size - 3px
var-font-size--large = 17px
var-font-weight--large = 500

// Input
var-background-color--input = transparent
var-box-shadow--text-input = none
var-box-shadow--cta = none
var-thumb-size = 29px
var-background--body = var-secondary-color
var-box-shadow = none
var-box-shadow--down = none
var-text-shadow = 0 1px none
var-round-border = 30px
var-border-radius = 4px
var-border-radius--large = 0
var-border--invalid = 1px solid var-input-invalid-border-color
var-input-border = 1px solid var-input-border-color


html
  height 100%
  width 100%

body
  position absolute
  top 0
  right 0
  left 0
  bottom 0
  padding 0
  margin 0
  -webkit-text-size-adjust 100%

*:not(input):not(textarea):not(select)
  user-select none

*
  -webkit-tap-highlight-color rgba(0, 0, 0, 0)

input:active, input:focus, textarea:active, textarea:focus, select:active, select:focus
  outline none

h1
  font-size 36px

h2
  font-size 30px

h3
  font-size 24px

h4, h5, h6
  font-size 18px
