/*

Copyright © David Bushell | @dbushell | http://dbushell.com

*/

@function rem($px, $base: 16) {
    @return ($px / $base) + rem;
}

$color--white     : #fff;
$color--silver    : #f7f7f5;
$color--slate     : #494b4c;
$color--cream     : #f2f0e6;
$color--canvas    : #d9d7ce;
$color--highlight : #fff699;
$color--error     : #e54545;
$color--green     : #99cc66;
$color--blue      : #3d9ccc;
$color--dark-blue : #226181;

$color--grey       : #494b4d;
$color--dark-grey  : #303233;
$color--light-grey : #919599;

$color--line       : lighten(#b3b0aa, 15);
$color--light-line : lighten($color--line, 15);
$color--dark-line  : darken($color--line, 15);

html {
  height: 100%;
  color: $color--grey;
  font-family: 'Droid Serif', serif;
}

body {
  height: 100%;
  overflow-x: hidden;
  background: $color--cream;
  
  &.js-lock-scroll {
    overflow: hidden !important;
  }
  
  &.js-lock-pointer {
    pointer-events: none !important;
  }
}

a {
  color: $color--blue;
  text-decoration: none;
  
  &:focus, &:hover {
    color: $color--dark-blue;
  }
}

.site {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
  
/*  .js-lock-scroll & {
    overflow: hidden;
  }*/
}

.site-content {
  display: -ms-flexbox;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100%;
  padding-bottom: 100px;
}

.button {
  display: inline-block;
  appearance: none;
  outline: none;
  border: none;
  padding: 0;
  margin: 0;
  font-weight: bold;
  font-size: rem(14);
  line-height: rem(21);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  box-shadow: 1px 1px 2px rgba(0,0,0, 0.1);
  transition: color 150ms ease, box-shadow 150ms ease, background 300ms ease;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  background: #fff;
  color: $color--blue;
  
  &:hover {
    color: $color--dark-blue;
    box-shadow: 1px 2px 3px rgba(0,0,0, 0.2);
  }
  
  &:active {
    color: #fff;
    transition: none;
    background: $color--blue;
  }
}

.button:not([class*='button--']) {
  padding: rem(7) rem(14);
}

.button--circular {
  position: relative;
  border-radius: 100%;
  padding: rem(14);
  
  span {
    display: block;
    height: 0;
    line-height: 0;
    margin: 50% 0 -50% 0;
    width: calc(100%);
    padding-bottom: calc(100%);
  }
  
  .fa {
    display: inline;
    line-height: 0;
  }
}

.nav-open {
  position: absolute;
  position: fixed;
  top: rem(14);
  left: rem(14);
}

.overlay,
.modal-wrapper {
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.overlay {
  z-index: 10000;
  overflow: hidden;
  
  &.js-open {
    display: block;
  }
}

.overlay__ripple {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  background: $color--blue;
  opacity: 0;
  transform-origin: 0 0;
  backface-visiblity: hidden;
  transform: scale(0) translate3d(-50%, -50%, 0);
  transition: opacity 600ms ease-in-out, transform 600ms cubic-bezier(0.7, 0, 0.6, 0.8);
  
  .overlay[data-modal="nav"] & {
    background: $color--green;
  }
  
  .js-animate-in & {
    opacity: 0.8;
    transform: scale(1) translate3d(-50%, -50%, 0);
  }
  
  .js-animate-done & {
    border-radius: 0;
    transform: none;
    transition: opacity 600ms ease-in-out;
  }
}

.modal-wrapper {
  z-index: 10001;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  
  display: -ms-flexbox;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  
  .overlay:not(.js-open) + & {
    display: none;
  }
  
  .overlay.js-animate-in.js-animate-done + & {
    overflow: auto;
  }

  &:after, &:before {
    display: block;
    content: "";
  }
}

.modal {
  box-sizing: border-box;
  position: relative;
  display: none;
  max-width: 400px;
  margin: rem(28);
  padding: rem(21);
  padding-bottom: rem(63);
  background: #fff;
  box-shadow: 1px 2px 3px rgba(0,0,0, 0.1);
  opacity: 0;
  transform: translateZ(0);
  transition: opacity 300ms 150ms ease-in-out, transform 300ms 150ms ease-in-out;
}

// nav

.modal[data-modal="nav"] {
  transform: scale(0.5);
  transform-origin: 0 0;
  padding: rem(14) rem(28);
  width: 100%;
  max-width: rem(240);
  
  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  li {
    display: block;
    border-bottom: 1px solid $color--line;
    
    &:last-child {
      border-bottom: 0;
    }
    
    a {
      display: block;
      font-size: rem(16);
      line-height: rem(28);
      padding: rem(7);
    }
  }
  
  .button[data-action="close"] {
    position: absolute;
    top: rem(-14);
    left: rem(-14);
  }
}

.overlay[data-modal="nav"] {
  
  & + .modal-wrapper {
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: row;
    
    &:after, &:before {
      display: none;
    }
  }
  
  // yeah the selectors and HTML configuration could be improved...
  
  &.js-open + .modal-wrapper .modal[data-modal="nav"] {
      display: block;
  }

  &.js-animate-in + .modal-wrapper .modal[data-modal="nav"] {
      opacity: 1;
      transform: scale(1);
  }
}

// test modal

.modal[data-modal="test"] {
  opacity: 0;
  transform: scale(0.95);
  
  .cssclippaths & {
    transform: translateZ(0);
    -webkit-clip-path: circle(0% at 50% 50%);
    transition: opacity 300ms ease-in-out, -webkit-clip-path 300ms cubic-bezier(0.7, 0, 0.6, 0.8);
  }

}

.overlay[data-modal="test"] {
  
  &.js-open + .modal-wrapper .modal[data-modal="test"] {
      display: block;
  }

  &.js-animate-in + .modal-wrapper .modal[data-modal="test"] {
      opacity: 1;
      transform: scale(1);
  }
}

.modal__footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: rem(14) rem(21);
  background: $color--canvas;
  text-align: right;
}