@import ./_shared


* {
  margin 0
  padding 0
  border 0
}

body
  color primaryColor
  font-size 13px
  font-family sans-serif
  background-color backgroundColor

main
  width 50em
  padding 2em 1em 5em 1em
  margin 0 auto

h1
  font-size 3em
  margin-bottom 0.5em

h2
  margin-bottom 1em

p
  margin-bottom 0.5em

form
  display inline-block
  input[type=text]
    border-width 1px
    border-style solid
    border-radius 0.5em
    border-color silentColor
    padding 0.5em 1em
    width 25em

textarea
  border-width 1px
  border-style solid
  border-color gray
  display none //block
  padding 1em
  border-radius 0.4em
  vertical-align top

button
  border-width 1px
  border-style solid
  border-color silentColor
  border-radius 0.5em
  cursor pointer
  padding 0.5em 1em
  margin 2em

.file
  border-width 1px
  border-style solid
  border-color fileColor
  border-radius 0.5em
  padding 1em 1em
  position relative
  font-family 'Source Code Pro', 'Courier New', monospace
  > .label
    margin-bottom 1em
    color rgba(primaryColor, 0.8)

  header
    // border-bottom-color rgba(0, 0, 0, 0.1)
    // border-bottom-style solid
    // border-bottom-width 1px
    margin-bottom 0.3em
    padding-bottom 0.2em

.string
  font-style italic
  font-weight 700
  color stringColor

.number
  color numberColor

.regex
  color regexColor

.label
  labelStyling()


// Boxed syntax elements
.arrowFunctionExpression,
.declarations,
.for,
.function,
.if,
.return,
.while
  // background-color white !important
  // box-shadow 1px 1px 1px rgba(0, 0, 0, 0.08)
  border-style solid
  border-width 1px
  // border-width 0px !important
  border-radius 3px


// Padded boxed elements
.arrowFunctionExpression,
.for,
.function,
.if,
.while
  padding 0.5em 0.4em 0.4em 1em
  margin-bottom 0.4em

  > header
    > div
      display inline-block

    &::before
      display inline-block
      margin-right 1em
      font-weight 600

.if
  background-color ifColor
  border-color darken(ifColor, 20%)

  > header
    &::before
      content 'if'

  > .consequent
    padding 0 0 0 1em

  > .alternate
    padding 0 0 0 1em
    &::before
      content 'else'
      display block
      font-weight 600
      margin-bottom 1em
      margin-left -1em


.for
  background-color forColor
  border-color darken(forColor, 10%)

  > header
    > .init
      display block
      > .declarations
        display inline-block
      &::before
        content 'set'
        margin-right 0.5em
        font-weight 600

    > .test
      display block
      &::before
        content 'for'
        margin-right 1em
        font-weight 600
      // &::after
      //   content 'do'
      //   margin-left 1em
      //   font-weight 600

  > .body,
  > .update
    padding 0 0 0 1em


.while
  background-color whileColor
  border-color darken(whileColor, 10%)

  > header
    &::before
      content 'while'

  > .body
    padding 0.5em 1em


.function
  background-color functionColor
  border-color darken(functionColor, 10%)
  position relative
  margin-bottom 2em

  &::before
    content 'function'
    labelStyling()

  > header
    > .name
      font-weight 900
      margin-right 0.5em

    > .parameters
      color gray
      &::before
        content '('
      &::after
        content ')'

      > .parameter:not(:last-of-type)
        &::after
          content ', '

.functionExpression .params,
.arguments
  &::before
    content '('
  &::after
    content ')'
  & > span:not(:last-of-type)
    &::after
      content ', '


.arrowFunctionExpression
  background-color arrowFuncColor
  border-color darken(arrowFuncColor, 10%)
  display inline-block
  vertical-align middle

  &.async
    &::before
      content 'async'
      margin-right 0.5em
      font-weight 900

  > div
    display flex
    align-items center

    > .parameters
      &::after
        margin 0 1em
        content '=>'

.expressionStatement
  padding 0.5em 0 0.5em 1em

.memberExpression
  white-space pre
  > .property
    &::before
      content '.'
  > .computed
    .property
      &::before
        content '['
      &::after
        content ']'


.callee > .memberExpression > .property
  color hsl(190, 70%, 60%) !important
  &::before
    content '\A   .'
    color  hsl(190, 70%, 60%) !important



.declarations
  background-color declarationsColor
  border-color darken(declarationsColor, 5%)
  padding 0em 2.5em 0.6em 1em
  margin-bottom 0.2em
  > .label
    margin-right -2.5em

.declaration
  > .identifier
    &::after
      content '\a0='
  > .init
    &::before
      content '\a0'


.operator
  margin 0 0.4em

.return
  display block
  background-color returnColor
  border-color darken(returnColor, 20%)
  padding 0em 2.5em 0.6em 1em

  &::before
    content 'return'
    margin-right -2.5em
    labelStyling()

.comment
  display inline-block
  border-left 4px solid hsl(0, 0, 80%)
  padding-left 1em
  color hsl(0, 0, 50%)
  font-size 0.9em
  margin 0.5em 0
  &::first-letter
    text-transform uppercase

.commentedSection
  margin-top 1em

.label + .commentedSection,
.body > .commentedSection:first-child
  margin-top 0 !important

.withTrailingComment
  display flex
  flex-direction row

  :first-child
    flex-grow 9

  .trailing.comment
    border-width 2px
    padding-left 0.5em
    margin-left 1em
    flex-grow 1

.objectExpression:empty
    &::before
      content '{'
    &::after
      content '}'

.arrayExpression:empty
    &::before
      content '['
    &::after
      content ']'

.arrayElement
  border-collapse collapse
  border-color rgba(0,0,0,0.2)
  border-style solid
  border-width 1px
  display block
  margin-right -1px
  padding 0 0.5em

.openingBracket,
.closingBracket,
.arraySeparator
  color transparent

.assignment,
.infinity,
.true,
.false,
.equal,
.bitshift
  color transparent
  margin 0 0.2em
  width 0.8em
  display inline-block
  &::before
    color black


.assignment
  font-size 0.8em
  padding 0 0.2em
  &::before
    content '='

.infinity
  font-size 1.4em
  vertical-align -10%
  &::before
    content '∞'

.true::before
  color green
  content '✔︎'
.false::before
  color red
  content '✘'

span[class='operator equal']
  width 1.5em
  &::before
    color orange
    content 'is'
.not.equal::before
  content '≠'

span[class='operator strict equal']
  width 6.5em
  &::before
    color orange
    content 'is exactly'
    white-space nowrap
.not.strict.equal::before
  content '≢'
  font-size 1.6em

.bitshift.left::before
  content '≪'
.bitshift.right::before
  content '≫'

.smaller.equal::before
  content '≤'
  font-size 1.2em
.larger.equal::before
  content '≥'
  font-size 1.2em

.error
  color red
  background-color rgb(250,200,200)
  border-width 1px
  border-style solid
  border-color rgb(230,180,180)
  border-radius 3px
  padding 0.2em 1em

.shebang
  color gray
  margin-bottom 1em

// .thisExpression
//  &::after
//    content 'this'