/**
 * CSS Modal
 * Modal as reusable module
 * http://drublic.github.com/css-modal
 *
 * @author Hans Christian Reinl - @drublic
 * @version 1.0.4
 *
 * Usage:
 *    selector {
 *        @extend %modal;
 *    }
 */


/*
 * Configuration
 */
@import "solarized-vars";
$modal-border-color: $base03;
$modal-max-width: 650px;
$modal-mobile-header: $base03;
$modal-layer: 999; // Set high z-index to appear above all other content


// Prevent overflow on HTML element
html {
  overflow-y: scroll;
}

.has-overlay {
  overflow: hidden;

  > body {
    height: 100%;
    overflow-y: scroll;
  }
}

.call-modal, .has-overlay footer a {
  float: right;
} 
.call-modal {
  padding: 0 1em; 
} 
.has-overlay footer a {
  padding: 1em; 
} 
.app-header .call-modal--info {
  color: $base1;
  font-size: 1.125rem; 
  padding-top: 2rem;
}
.app-header .call-modal--info:after {
  font-size: 14px;
}
 
.call-modal:after,
a:not(.nav-li-a)[href ^="http"]:after {
  content: " \2197";
  font-family: Calibri, "Lucida Grande", "DejaVu Sans", "Linux Libertine", Libertine, "Arial Unicode MS", Futura, sans-serif;
  font-size: .875em;
  margin-left: .25em;
  font-weight: bold;
  color: $blue;
  background-color: #fff;
  padding-right: .2em;
  border: 1px solid #DDD;
  border-bottom-color: #BBB;
  border-right-color: #CCC;
  -webkit-border-radius: 12px 12px 0 0;
  -moz-border-radius: 12px 12px 12px 0;
  border-radius: 12px 12px 12px 0;
  vertical-align: top;
  text-shadow: rgba(black, 0.75) 0 1px 1px;
}
.page-footer a:after,
.call-modal--info:after, 
.has-overlay footer a[href ^="http"]:after, 
.page-footer a[href ^="http"]:after { 
  color: #fff;
  background-color: $blue;
  border-color: $base01; 
}
%modal {
  // Hide initially
  -webkit-transform: translate(0, 100%);
  -moz-transform: translate(0, 100%);
  -o-transform: translate(0, 100%);
  -ms-transform: translate(0, 100%);
  transform: translate(0, 100%);
  -webkit-transform: translate3d(0, 100%, 0); // iOS
  transform: translate3d(0, 100%, 0);

  // Maintain a fixed position
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: $modal-layer;

  opacity: 0;

  color: #222;
  line-height: 1.3;

  // Show modal when requested
  &:target {

    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);

    opacity: 1;
  }

  // Internet Explorer 8
  display: none\9;

  &.is-active {
    display: block\9;
  }

  // Overwrite IE8 hack for IE9 and IE10
  &:target {
    display: block\9;
  }


  // Content Area
  .modal-inner {
    position: absolute;
    top: 50px;
    left: 50%;
    z-index: 20;
    margin-left: ($modal-max-width / 2) * -1;

    width: $modal-max-width;
    overflow-x: hidden;

    -webkit-overflow-scrolling: touch; // Native style momentum scrolling

    border-radius: 2px;
    background: $base02;
    -webkit-box-shadow: 0 0 30px rgba(0,0,0,0.6);
    box-shadow: 0 0 30px rgba(0,0,0,0.6);

    > img,
    > video,
    > iframe {
      width: 100%;
      height: auto;
      min-height: 300px;
    }

    > img {
      width: auto;
      max-width: 100%;
    }
  }

  // Header
  header {
    border: 1px solid $modal-border-color; 
    border-bottom-color: shade($modal-border-color, 10);
    padding: 0 1.2em;

    > h2 {
      margin: 0.5em 0;
    }
  }


  // Content
  .modal-content {
    max-height: 400px;
    max-height: 70vh;
    border: 1px solid shade($modal-border-color, 5); 
    border-top-color: lighten($modal-border-color, 5); 
    border-bottom-color: shade($modal-border-color, 10); 
    padding: 15px 1.2em;
    overflow-x: hidden;
    overflow-y: auto;

    > * {
      max-width: 100%;
    }
  }


  // Footer
  footer {
    border-top: 1px solid lighten($modal-border-color, 5); 
    border-bottom-color: shade($modal-border-color, 10); 
    padding: 0 1.2em 18px;
    background: $base02;
    border-radius: 2px;
  }


  // A close button
  .modal-close {
    display: block;
    text-indent: -100px;
    overflow: hidden;

    // Background as close
    &:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 10;

      // Background for overlay – Data URI because of IE8 not supporting rgba
      background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AAAAAMwA0QDNTiUx4gAAAABJRU5ErkJggg==');
    }

    // Actual close button on modal
    &:after {
      content: '\00d7';
      position: absolute;
      top: 25px;
      left: 50%;
      z-index: 20;
      margin-left: ($modal-max-width / 2) - 40;

      background: $base02;

      border-radius: 2px;
      padding: 2px 8px;

      font-size: 1.2em;
      text-decoration: none;
      text-indent: 0;
      font-weight: bold;
    }
  }


  // When screen isn't as wide as the modal anymore
  @media screen and (max-width: $modal-max-width + 40) {
    .modal-inner {
      width: auto;
      left: 20px;
      right: 20px;
      margin-left: 0;
    }

    .modal-close {
      left: auto;
      right: 33px;
      margin-left: 0;

      &:after {
        margin-left: 40%;
      }
    }
  }

  // For small screens adjust the modal
  @media screen and (max-width: 30em) {
    -webkit-transform: translate(0, 400px); // Use px to work around Android 2.3 bug
    -webkit-transform: translate3d(0, 100%, 0); // And overwrite px if 3D transforms are supported
    transform: translate3d(0, 100%, 0);

    -webkit-transition: -webkit-transform .25s ease-in-out, opacity 1ms .25s;
    -moz-transition:    -moz-transform .25s ease-in-out, opacity 1ms .25s;
    -o-transition:      -o-transform .25s ease-in-out, opacity 1ms .25s;
    -ms-transition:     -ms-transform .25s ease-in-out, opacity 1ms .25s;
    transition:         transform .25s ease-in-out, opacity 1ms .25s;

    display: block;
    height: 100%;
    bottom: auto;

    &:target {
      -webkit-transition: -webkit-transform .25s ease-in-out;
      -moz-transition:    -moz-transform .25s ease-in-out;
      -o-transition:      -o-transform .25s ease-in-out;
      -ms-transition:     -ms-transform .25s ease-in-out;
      transition:         transform .25s ease-in-out;
    }

    &:before {
      background-color:  $modal-mobile-header;
      background-image: -webkit-gradient(linear, left top, left bottom, from($modal-mobile-header), to(darken($modal-mobile-header, 5%)));
      background-image: -webkit-linear-gradient(top, $modal-mobile-header, darken($modal-mobile-header, 5%));
      background-image:    -moz-linear-gradient(top, $modal-mobile-header, darken($modal-mobile-header, 5%));
      background-image:      -o-linear-gradient(top, $modal-mobile-header, darken($modal-mobile-header, 5%));
      background-image:         linear-gradient(to bottom, $modal-mobile-header, darken($modal-mobile-header, 5%));

      content: '';
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 30;
      height: 3em;
      -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.6);
      box-shadow: 0 0 5px rgba(0,0,0,0.6);
    }

    .modal-inner {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;

      top: 0;
      left: 0;
      right: 0;
      padding-top: 3em;
      height: 100%;
      overflow: scroll;
      -webkit-box-shadow: none;
      box-shadow: none;
    }

    .modal-content {
      max-height: none;
    }

    .modal-close {
      right: auto;
      text-decoration: none;

      &:before {
        display: none;
      }

      &:after {
        content: attr(data-close);
        top: 0.4em;
        left: 1em;
        z-index: 40;
        margin-left: 0;
        font-size: 1em;
        padding: 0.5em 1em;
      }
    }
  }


  // For small heights
  @media screen and (max-height: 46em) and (min-width: 30em) {
    .modal-content {
      max-height: 340px;
      max-height: 50vh;
    }
  }

  @media screen and (max-height: 36em) and (min-width: 30em) {
    .modal-content {
      max-height: 265px;
      max-height: 40vh;
    }
  }
}

// Fade in the modal
%modal-fade {
  @media screen and (min-width: 30em) {
    -webkit-transition: opacity 0.4s;
    -o-transition: opacity 0.4s;
    transition: opacity 0.4s;
  }


  @extend %modal;
}

.semantic-content {
  @extend %modal-fade;
}