.content
  h1 Get in touch
  p Instead of just having a mailto link, why not provide options? Let the user decide how they send an email!
  
  .email.js-email
    .overlay.js-overlay

    button.button.button--large.js-button Send me an email

    .dialog
      .dialog__top
        label.label(for='email') Email address:
        .control
          input.input(id='email', value='example@gmail.com', readonly)
          button.button.button--small.js-copy(data-clipboard-target='#email') Copy
      .dialog__bottom
        label.label(for='client') Preferred client:
        .control
          select.input.js-client-select(id='client')
            option(value='mailto:example@gmail.com') Default
            option(value='https://www.google.com/gmail/') Gmail (web)
            option(value='https://outlook.live.com/') Outlook (web)
            option(value='https://mail.yahoo.com/') Yahoo (web)
            option(value='https://mail.aol.com/') AOL (web)

          a.button.button--small.js-client-open(href='mailto:example@gmail.com') Open

$color--white = #FFFFFF
$color--black = #000000
$color--primary = #9CCC65

*
  box-sizing border-box

html, body
  height 100%

body
  display flex
  justify-content center
  align-items center
  width 100%
  height 100%
  padding 10px
  font-family 'Source Sans Pro', serif
  color tint($color--black, 20%)
  background shade($color--white, 5%)
  
h1
  font-family 'Bree Serif', sans-serif
  font-size 45px
  font-weight 400
  margin-bottom 20px

p
  font-size 22px
  line-height 1.6em
  
.button
  background $color--primary
  border 0
  outline 0
  font-family 'Source Sans Pro', serif
  font-weight bold
  text-transform uppercase
  text-decoration none
  letter-spacing 1px
  color $color--white
  cursor pointer

  &:hover
    background tint($color--primary, 10%)

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

.button--small
  display flex
  justify-content center
  align-items center
  min-width 70px
  padding 5px 10px
  border-radius 0 5px 5px 0
  font-size 14px
    
.button--large
  position relative
  padding 15px 30px
  border-radius 5px
  font-size 16px

  &:active
    top 1px

.content
  text-align center
  max-width 350px

.email
  position relative

.overlay
  position fixed
  z-index -1
  background rgba($color--black, 50%)
  top 0
  left 0
  width 100%
  height 100%
  opacity 0
  will-change opacity
    
  .email--is-active &
    opacity 1
    z-index 1
    transition opacity 0.2s

.dialog
  position absolute
  z-index 2
  top 0
  display flex
  flex-direction column
  width 100%
  box-shadow 0 48px 80px -32px rgba(0, 0, 0, 0.3)
  text-align left
  transform translateY(-100%) scale(0)
  transform-origin bottom
  opacity 0

  .email--is-active &
    transform translateY(-100%) scale(1)
    opacity 1
    transition transform 0.2s, opacity 0.2s
    
  &:after
    content ''
    position absolute
    left 50%
    bottom 0
    width 20px
    height 20px
    background $color--white
    border-radius 0 0 5px 0
    transform translate(-50%, 50%) rotate(45deg)
    transform-origin center
    
.dialog__top
  padding 30px
  background shade($color--white, 5%)
  border-radius 5px 5px 0 0

.dialog__bottom
  padding 30px
  background $color--white
  border-radius 0 0 5px 5px

.control
  display flex
  
.input
  font-family 'Source Sans Pro', sans-serif
  width 100%
  height 43px
  padding 8px 10px
  border-radius 5px 0 0 5px
  border 1px solid shade($color--white, 20%)
  border-right 0
  background $color--white
  font-size 18px
  
.label
  display block
  font-size 14px
  font-weight bold
  text-transform uppercase
  margin-bottom 10px
  margin-left 3px

const button = document.querySelector('.js-button')
    , overlay = document.querySelector('.js-overlay')
    , email = document.querySelector('.js-email')
    , copy = document.querySelector('.js-copy')
    , clientSelect = document.querySelector('.js-client-select')
    , clientOpen = document.querySelector('.js-client-open')

button.addEventListener('click', function() {
  email.classList.add('email--is-active')
})

overlay.addEventListener('click', function() {
  email.classList.remove('email--is-active')
})

clientSelect.addEventListener('change', function() {
  let clientSelection = clientSelect.value
    
  if (clientSelection === 'mailto:example@gmail.com') {
    clientOpen.setAttribute('href', clientSelection)
    clientOpen.removeAttribute('target')
  } else {
    clientOpen.setAttribute('href', clientSelection)
    clientOpen.setAttribute('target', '_blank')
  }
})

new Clipboard('.js-copy')