cozy-labs/cozy-desktop

@require './node_modules/cozy-ui/stylus/settings/icons.styl'
@require './node_modules/cozy-ui/stylus/settings/palette.styl'
@require './_spin'

.wizard
  overflow hidden
  width 100vw
  height 100vh
  position relative

.on-step-address
  .step
    transform translate(-100vw, 0)

.on-step-folder
  .step
    transform translate(-200vw, 0)

.step
  position absolute
  left 0
  top 0
  display flex
  justify-content space-between
  align-items center
  width 100vw
  height 100vh
  transition transform .2s ease-out, background-color .1s
  will-change transform

  h1
    color var(--charcoalGrey)
    font-size: 1.5rem

a.more-info
  display: inline-block
  color var(--dodgerBlue)
  padding-top rem(13px, 14px)
  margin-left .25em
  text-decoration: none


.step-content
  flex 0 1 40em
  max-width: 35em
  margin auto
  padding 3em 1em

.btn
  @extend $button
  @extend $button--regular
  width: 100%
  font-size: 1.1em
  margin 1em 0 0 0

  &[aria-busy=true] > span
    // We want a busy spinner vertically aligned with the text, not centered
    align-items unset

    &::after
      content ''
      position relative
      left .5rem

      @extend $icon-16
      @extend $spin
      background-color: var(--primaryContrastTextColor)


.step-address .coz-form-group
  @extend $form .coz-form-group
  @extend $form-text
  margin-bottom: 1em
.step-address label
  @extend $form .coz-form-label
  font-size: 1em
.step-address .https-input-wrapper
  display: flex
  flex-direction: row
  span
    flex 0 0
    padding: 0.9em 0.3em
    font-size: 1.1em
    color var(--black)
  input
    flex 1 0
.step-address .cozy-form-tip
  font-style: italic
  color var(--slateGrey)


.folder__config-option__title
  font-weight bold

.folder__path
  $iconSpace = 1.1rem

  font-weight bold
  font-style italic

  padding-left $iconSpace

  &:before
    @extend $icon
    display: inline-block
    vertical-align: middle
    -webkit-mask-image: embedurl('./node_modules/cozy-ui/assets/icons/ui/folder.svg')
    -webkit-mask-position: center
    -webkit-mask-size: cover
    mask-image: embedurl('./node_modules/cozy-ui/assets/icons/ui/folder.svg')
    mask-position: center
    mask-size: cover

    position absolute
    width 1rem
    height 1rem
    margin-left - $iconSpace
    content ''
    background-color var(--slateGrey)

    /.u-error &
      background-color var(--errorColor)

.step-address
  left 100vw

.step-folder
  left 200vw
  text-align left

  .svg-wrapper
    background-color: var(--emerald)
    margin-bottom 0

  h1
    text-align center
    margin-top 2rem

  &.step-error
    .folder-helper
      color var(--black)
    .error-message
      margin .5em 0

.step-error
  color var(--pomegranate)
  .svg-wrapper
    background-color var(--pomegranate)
  .btn
    opacity  .5
    cursor   not-allowed