cloudflare/InstantPlugin

@import "./styl/colors"
@import "./styl/fonts"
@import "./styl/font-smoothing"

[data-component="application"]
  width 100%
  position relative
  z-index 2
  align-items center
  flex-flow column nowrap
  justify-content center
  padding-top 3em
  line-height 1.5
  min-height 100vh

  @media mobileMaxWidthQuery
    padding-top 4em
    padding-bottom @padding-top

  .box
    display block
    border-radius .75em
    background #fff
    box-shadow 0 .1875em .375em -.1875em rgba(#000, .325)

  .embed-code-input, .attribute-picker
    antialiasedFonts()
    font-family monospaceFonts
    border 0
    padding .8em 1.125em
    resize none
    min-height 17.3em
    line-height 1.6
    width 100%

  .preview-container-wrapper
    padding 1.5em

  .preview-container
    position relative
    transform translate3d(0, 0, 0)
    overflow hidden

    &:after
      content ""
      display block
      position absolute
      top 0
      right 0
      bottom 0
      left 0
      pointer-events none
      border 1px solid rgba(#000, .21)
      box-shadow 0 0 0 .25em #fff
      border-radius .3125em

    > iframe
      display block
      border none
      min-height 28em
      height 80vh
      width 100%

  .embed-code-input
    color inherit

    &:focus
      outline none

  .attribute-picker
    color mutedTextColor

    .hljs-string, .hljs-number
      color textColor

    .details
      color darken(mutedTextColor, 20%)
      font-family sansSerifFonts
      font-size 1.2em
      margin 0
      text-align center
      white-space normal

  .steps
    width 80em
    max-width 100vw
    justify-content center
    position relative
    overflow hidden
    padding 0 1em 1em

    .step
      position relative
      display block
      min-width 40em // TODO: needs improvement on small screens.
      width 50%
      margin auto
      transition transform .3s ease, opacity .3s ease
      transform translate3d(0, 0, 0)
      will-change transform
      opacity 1

      > p
        text-align center
        font-size 1.25em
        font-weight 300
        margin 0 0 1em

      &[data-step="preview"]
        width 100%

    .step:not(.active)
      pointer-events none
      position absolute
      opacity 0

    &[data-active-step="embed-code"] .step[data-step="attributes"],
    &[data-active-step="attributes"] .step[data-step="preview"],
    &[data-active-step="preview"] .step[data-step="download"]
      transform translate3d(5em, 0, 0)

    &[data-active-step="attributes"] .step[data-step="embed-code"],
    &[data-active-step="preview"] .step[data-step="attributes"],
    &[data-active-step="download"] .step[data-step="preview"]
      transform translate3d(-5em, 0, 0)

      &::after
        content ""
        display block
        position absolute
        border-radius 2em
        top 0
        right 0
        bottom 0
        left 0
        pointer-events none

      for i in (0..20)
        &[data-entity-order={'"' + i + '"'}]::after
          animation highlight-entity 1s ease-in-out
          animation-fill-mode forwards
          animation-delay .15s * i

  .attribute-picker
    cursor default
    overflow-wrap break-word
    user-select none
    white-space pre-wrap
    word-break break-word
    word-wrap break-word

    [data-entity-id]
      position relative
      border-radius 2em
      padding .0625em .5em
      cursor pointer
      box-shadow 0 0 0 1px rgba(mutedTextColor, .5)
      background #eee

      &:not(.tracked):hover
        box-shadow 0 0 0 1px rgba(textColor, .8)

      &.tracked
        background #fff
        box-shadow 0 0 0 2px brandOrange

@keyframes highlight-entity
  0%
    box-shadow 0 0 0 1px rgba(brandOrange, 0)
    animation-timing-function ease-in

  50%
    box-shadow 0 0 0 3px rgba(brandOrange, .5)
    animation-timing-function ease-out

  100%
    box-shadow 0 0 0 5px rgba(brandOrange, 0)
    animation-timing-function ease-out