@charset "UTF-8";
@import "settings";
@import "mixins";

div.pat-modal {
  -webkit-box-sizing: border-box;
  position: fixed;
  z-index: 9998;
  background-color: #efefef;
  // background-clip: padding-box;
  border: 1px solid black;
  width: 500px;
  margin-left: -250px;
  left: 50%;
  margin-top: 1em;
  margin-bottom: 1em;

  .filter-bar {
    margin-bottom: 2em;

    input[type=search] {
      float: right;
      width: 14em;
    }
  }

  .header {
    color: gray;
    padding: 0.5em 1.5em;
    // border-bottom: 0.1em solid #dedede;
    height: 1em;
    background-color: white;
    position: relative;
    z-index: 1;

    h1, h2, h3, h4 {
      margin: 0;
      font: 16px/20px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
      letter-spacing: 1px;
      font-weight: bold;
      text-align: center;
    }

    .close-panel {
      position: absolute;
      color: gray;
      top: 9px;
      right: 9px;
      line-height: 22px;
      height: 22px;
      width: 22px;
      padding: 0;
      text-indent: -1000px;
      overflow: hidden;
      margin: 0;
      filter: none;
      border-style: none;
      border-radius: 50%;
      background-image: none;
      outline: none;

      &:before {
        content: "#{$glyph-close}";
        text-indent: 0;
        position: absolute;
        top: 0;
        right: 0;
        width: 22px;
        font: normal 20px/23px fontello;
      }
    }
  }

  .panel-content {
    background-color: white;
    padding: 1.5em;
    position: relative;
    z-index: 1;
    overflow: hidden;
  }

  &.max-height .panel-content {
    overflow: auto;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    top: 37px;
    z-index: 1;
  }

  &.large {
    width: 768px;
    margin-left: -384px;
  }

  &.small {
    width: 400px;
    margin-left: -200px;
  }

  img {
    max-width: 100%;
  }

  &:before {
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    content: " ";
    display: block;
    z-index: 1;
    border: 1px #dedede solid;
    box-shadow: 0 0.1em 0.4em rgba(0,0,0,0.2);
    -moz-pointer-events:none;
    -webkit-pointer-events:none;
    pointer-events:none;

    // Next line is a patch for Safari which inherits the animation on :before of the spinner even if the injection class has already been removed.
    -webkit-animation: none;
  }

  .wizard-box {
    margin: -1.5em -1.5em -1.55em -1.5em;

    .panel-body {
      overflow: auto;
      padding: 1.5em;
      background-color: white;
      margin-bottom: 0;
      margin-top: 0;
    }

    .panel-footer {
      margin: 0;
      padding: 0.5em 1.5em;
      border-top: 1px solid #dedede;
      height: 1.6em;
      background-color: #efefef;
    }
  }

  &.max-height {

    .wizard-box {
      overflow: hidden;
    }

    .panel-body {
      position: absolute;
      top: 0;
      bottom: 51px;
      right: 0;
      left: 0;
    }

    .panel-footer {
      position: absolute;
      bottom: 0;
      right: 0;
      left: 0;
    }
  }

  &:after {
    content: " ";
    display: block;
    position: fixed;
    top: -10000px;
    right: -10000px;
    bottom: -10000px;
    left: -10000px;
    background-color: rgba(255,255,255,0.98);
    z-index: -1;
    opacity: 0.98;

    -moz-animation: fadeIn 1s;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;

    -webkit-animation-fill-mode: forwards;
  }

  @include screen-size(small) {
    width: 100% !important;
    height: 100% !important;
    z-index: 10000;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    max-width: inherit !important;
    max-height: inherit !important;
    margin: 0 !important;
    border: none !important;

    .panel-content {
      height: 100%;
      padding-top: 4em;

      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }

    .wizard-box {
      overflow: hidden;
    }

    .header {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 2;
    }

    .panel-body {
      position: absolute;
      top: 2em;
      bottom: 57px;
      right: 0;
      left: 0;
    }

    .panel-footer {
      position: absolute;
      bottom: 0;
      right: 0;
      left: 0;
    }
  }
}
