.modal
  h2 Sign in
  form
    .field
      label.field__label(for='username') Email
      input.field__input(id='username', type='email', placeholder='example@gmail.com', required)
    .field.field--toggle
      label.field__label(for='password') Password
      input.field__input.js-password(id='password', type='password', placeholder='Must be at least 1 character', autocomplete='off', required)
      .option
        input.option__input.js-password-toggle(id='toggle' type='checkbox')
        label.option__label.js-password-label(for='toggle') Show
    .form-actions
      button.button Sign in

$color--white  = #FFFFFF
$color--black  = #000000
$color--green  = #7ADE9B
$color--orange = #FFA726

body
  display flex
  flex-wrap wrap
  justify-content center
  align-items center
  
.modal
  display flex
  flex-direction column
  width 600px
  padding 30px 40px 40px
  background $color--white
  box-shadow 0 48px 80px -32px rgba(0, 0, 0, 0.3)
  
.field
  margin-bottom 30px
  
.field--toggle
  position relative
  
.field__label
  margin-bottom 10px
  font-size 20px
  
.field__input
  width 100%
  padding 15px
  border 0
  border 4px solid shade($color--white, 10%)
  font-size 18px

  .field--toggle &
    padding-right 80px
  
  &:focus
    border-bottom-color shade($color--white, 20%)
    outline 0
    
  &:valid
    border-bottom-color $color--green

.button
  background $color--orange
  padding 15px 30px
  border-radius 5px
  font-size 18px
  color $color--white
  
  &:hover
    background tint($color--orange, 10%)

  &:active
    background shade($color--orange, 10%)

.option
  display flex
  align-items center
  
  .field--toggle &
    position absolute
    right 15px
    bottom 14px
    padding 5px 8px
    border-radius 5px
    background shade($color--white, 10%)

    &:hover
      background shade($color--white, 15%)

    &:hover
      background shade($color--white, 20%)

.option__input
  position absolute
  z-index -1
  opacity 0

.option__label
  font-size 18px
  cursor pointer

  .field--toggle &
    width 42px
    text-align center
  
.form-actions
  display flex
  justify-content flex-end
  align-items center

const passwordToggle = document.querySelector('.js-password-toggle')

passwordToggle.addEventListener('change', function() {
  const password = document.querySelector('.js-password')
      , passwordLabel = document.querySelector('.js-password-label')

  if (password.type === 'password') {
    password.type = 'text'
    passwordLabel.innerHTML = 'Hide'
  } else {
    password.type = 'password'
    passwordLabel.innerHTML = 'Show'
  }
  
  password.focus()
})