/**
* Basic modal markup.
*
* We use [ng2-modal](https://github.com/pleerock/ng2-modal) for our modals. We use our own custom styles instead of bootstrap styles though.
*
* @section Modals
*
* @example
* <!-- Demo Specific Styles -->
* <style>
*   .example-container {
*     position: relative;
*   }
*   .modal { position: relative !important; }
*   .modal-backdrop { position: absolute !important; }
* </style>
* <!-- Modal Markup -->
* <div class="example-container">
*   <div class="modal in fade" role="dialog" style="display: block;">
*     <div class="modal-dialog undefined">
*       <div class="modal-content">
*         <div class="modal-header">
*           <button class="close"><span>×</span></button>
*           <modal-header>
*             <h1>Modal header</h1>
*           </modal-header>
*         </div>
*         <div class="modal-body">
*           <modal-content>
*            Hello Modal!
*           </modal-content>
*         </div>
*         <div class="modal-footer">
*           <modal-footer>
*             <button class="clear">Close</button>
*             <button class="primary">Save</button>
*           </modal-footer>
*         </div>
*       </div>
*     </div>
*   </div>
*   <div class="modal-backdrop fade in"></div>
* </div>
*/

@zindex-modal: 1050;
@zindex-modal-background: 1040;

// Kill the scroll on the body
.modal-open {
  overflow: hidden;
}

.modal {
  overflow: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-overflow-scrolling: touch;
  display: block !important;
  outline: 0;
  z-index: -20;
  transition: z-index .3s step-end;
  .modal-dialog {
    opacity: 0;
    transform: translateY(-100%);
    transition: transform 0.3s cubic-bezier(1,0,0,1),
                opacity 0.3s ease;
  }
  &.in {
    z-index: @zindex-modal;
    transition: z-index .3s step-start;
    .modal-dialog {
      opacity: 1;
      transform: translateY(0%);
    }
  }
}
.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}

.modal-dialog {
  width: 100%;
  max-width: 50em;
  margin: 0 auto;
  padding: 5vh 1em;
}

.modal-content {
  background-color: white;
  box-shadow: 0 7px 20px 5px fadeOut(@clr-black, 60);
  background-clip: padding-box;
  outline: 0;
}

.modal-header {
  background-color: @clr-title-bg;
  color: white;
  padding: 0.25em 0.75em;
  white-space: nowrap;
  &:extend(.clearfix all);
  h1,h2,h3,h4,h5,h6 {
    font-size: 1.25rem;
    line-height: 1.4em;
    margin: 0;
    display: inline-block;
    vertical-align: top;
    width: 90%;
    width: ~"calc(100% - 1.5rem)";
    text-overflow: ellipsis;
    overflow-x: hidden;
  }
  .close {
    float: right;
    font-size: 1.5rem;
    line-height: 1.2em;
    background-color: transparent;
    color: lighten(@clr-remove, 20);
    border: none;
    box-shadow: none;
    padding: 0;
    &:hover,
    &:focus {
      color: lighten(@clr-red, 10);
      transform: none;
    }
    &:active { color: @clr-red; }
    &:extend(.icon-close all);
    &:before {
      font-family: 'benchmark';
      margin: 0;
    }
    span { display: none; }
  }
}

.modal-body {
  padding: 0.5em 0.75em;
  padding: 0.5em 0.75em;
  max-height: ~"calc(90vh - 6em)";
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.modal-footer {
  border-top: 1px solid @clr-frame-lt;
  padding: 0.5em 0.75em 0.667em;
  text-align: right;
}

.modal-backdrop {
  background-color: fadeOut(@clr-black, 30);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  z-index: -20;
  transition: z-index .2s step-end, opacity .2s ease;
  &.in {
    opacity: 1;
    z-index: @zindex-modal-background;
    transition: z-index .4s step-start, opacity .4s ease;
  }
}

// Measure scrollbar width for padding body during modal show/hide
.modal-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}

/**
* For adding disclaimers, notices, warnings, etc. Form errors should appear above the form inputs, not in one of these.
*
* @section Warnings in Modals
* @sectionof Modals
*
* @example
* <!-- Demo Specific Styles -->
* <style>
*   .example-container {
*     position: relative;
*   }
*   .modal { position: relative !important; }
*   .modal-backdrop { position: absolute !important; }
* </style>
* <!-- Modal Markup -->
* <div class="example-container">
*   <div class="modal in fade" role="dialog" style="display: block;">
*     <div class="modal-dialog undefined">
*       <div class="modal-content">
*         <div class="modal-header">
*           <button class="close"><span>×</span></button>
*           <modal-header>
*             <h1>Modal with a Warning</h1>
*           </modal-header>
*         </div>
*         <div class="modal-body">
*           <modal-content>
*            <div class="modal-warning">
*              <p class="icon-attention">Here is a warning that you should know about.</p>
*            </div>
*            Hello Modal!
*           </modal-content>
*         </div>
*         <div class="modal-footer">
*           <modal-footer>
*             <button class="clear">Close</button>
*             <button class="primary">Save</button>
*           </modal-footer>
*         </div>
*       </div>
*     </div>
*   </div>
*   <div class="modal-backdrop fade in"></div>
* </div>
*/
.modal .modal-warning {
  background-color: @clr-yellow;
  margin: -0.5em -0.75em 0.5em;
  padding: 0.5em 0.75em;
  font-weight: bold;
}

/**
* For settings modals that need different internal views.
*
* @section Modal with a Menu
* @sectionof Modals
*
* @example
* <!-- Demo Specific Styles -->
* <style>
*   .example-container {
*     position: relative;
*   }
*   .modal { position: relative !important; }
*   .modal-backdrop { position: absolute !important; }
* </style>
* <!-- Modal Markup -->
* <div class="example-container">
*   <div class="modal in fade" role="dialog" style="display: block;">
*     <div class="modal-dialog undefined">
*       <div class="modal-content">
*         <div class="modal-header">
*           <button class="close"><span>×</span></button>
*           <modal-header>
*             <h1>Modal with a Menu</h1>
*           </modal-header>
*         </div>
*         <div class="modal-body">
*           <modal-content>
*             <div class="modal-w-menu">
*               <div class="modal-menu">
*                 <ul>
*                   <li><button>Option 1</button></li>
*                   <li><button class="active">Option 2</button></li>
*                   <li><button>Option 3</button></li>
*                   <li><button>Option 4</button></li>
*                 </ul>
*               </div>
*               <div class="modal-menu-stage">
*                 <div class="modal-body">
*                   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, et, repellendus! Obcaecati repellendus magni inventore ducimus dolor ea illo, ullam.</p>
*                 </div>
*                 <div class="modal-menu-footer">
*                   <button class="clear">Cancel</button>
*                   <button class="primary">Save</button>
*                 </div>
*               </div>
*             </div>
*           </modal-content>
*         </div>
*       </div>
*     </div>
*   </div>
*   <div class="modal-backdrop fade in"></div>
* </div>
*/
@clr-nav-bg: lighten(@clr-title-bg, 7);
@clr-nav-item-hover: lighten(@clr-title-bg, 15);
@clr-nav-item-selected: lighten(@clr-title-bg, 25);
.modal-w-menu {
  display: flex;
  flex-direction: row;
  margin: -0.5em -0.75em;
  .modal-menu {
    background-color: @clr-nav-bg;
    min-width: 11em;
    ul {
      margin: 0;
      padding: 0;
      li {
        list-style: none;
      }
    }
    button {
      background-color: transparent;
      color: white;
      text-align: left;
      border: none;
      border-radius: 0;
      padding: 0.5em 0.75em;
      width: 100%;
      opacity: 0.7;
      box-shadow: none;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow-x: hidden;
      &:active {
        transform: none;
      }
      &:hover, &:focus {
        opacity: 1;
        background-color: @clr-nav-item-hover;
      }
      &.active {
        background-color: @clr-nav-item-selected;
        opacity: 1;
        position: relative;
        &:after {
          content: ' ';
          background-color: white;
          display: inline-block;
          width: 10px;
          height: 10px;
          position: absolute;
          top: 0.85em;
          right: -5px;
          transform: rotate(45deg);
        }
      }
    }
  } // end .modal-menu
  .modal-menu-stage {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .modal-menu-footer {
    border-top: 1px solid @clr-frame-lt;
    padding: 0.5em 0.75em 0.667em;
    text-align: right;
  }
}

/**
* There are 3 modal sizes available.
*
* - __Small:__ Add the class `small-modal` to `.modal-dialog`.
* - __Standard:__ This size is default.
* - __Large:__ Add the class `large-modal` to `.modal-dialog`.
*
* ### Launch a test modal:
*
* <div id="modalTests">
*  <button id="small">Open Small Modal</button>
*  <button id="standard">Open Standard Modal</button>
*  <button id="large">Open Large Modal</button>
* 
*   <div class="modal fade" id="smallModal" role="dialog" style="display: block;">
*     <div class="modal-dialog small-modal">
*       <div class="modal-content">
*         <div class="modal-header">
*           <button class="close closeModal"><span>×</span></button>
*           <modal-header>
*             <h1>Modal header</h1>
*           </modal-header>
*         </div>
*         <div class="modal-body">
*           <modal-content>
*            Hello Modal!
*           </modal-content>
*         </div>
*         <div class="modal-footer">
*           <modal-footer>
*             <button class="clear closeModal">Close</button>
*             <button class="primary closeModal">Save</button>
*           </modal-footer>
*         </div>
*       </div>
*     </div>
*   </div>
*   <div class="modal fade" id="standardModal" role="dialog" style="display: block;">
*     <div class="modal-dialog">
*       <div class="modal-content">
*         <div class="modal-header">
*           <button class="close closeModal"><span>×</span></button>
*           <modal-header>
*             <h1>Modal header</h1>
*           </modal-header>
*         </div>
*         <div class="modal-body">
*           <modal-content>
*            Hello Modal!
*           </modal-content>
*         </div>
*         <div class="modal-footer">
*           <modal-footer>
*             <button class="clear closeModal">Close</button>
*             <button class="primary closeModal">Save</button>
*           </modal-footer>
*         </div>
*       </div>
*     </div>
*   </div>
*   <div class="modal fade" id="largeModal" role="dialog" style="display: block;">
*     <div class="modal-dialog large-modal">
*       <div class="modal-content">
*         <div class="modal-header">
*           <button class="close closeModal"><span>×</span></button>
*           <modal-header>
*             <h1>Modal header</h1>
*           </modal-header>
*         </div>
*         <div class="modal-body">
*           <modal-content>
*            Hello Modal!
*           </modal-content>
*         </div>
*         <div class="modal-footer">
*           <modal-footer>
*             <button class="clear closeModal">Close</button>
*             <button class="primary closeModal">Save</button>
*           </modal-footer>
*         </div>
*       </div>
*     </div>
*   </div>
*   <div class="modal-backdrop fade" id="m-backdrop"></div>
* <script>
*   $(document).ready(function() {
*     $('#small').click(function() {
*       $('#smallModal').addClass('in');
*       $('#m-backdrop').addClass('in');
*     });
*     $('#standard').click(function() {
*       $('#standardModal').addClass('in');
*       $('#m-backdrop').addClass('in');
*     });
*     $('#large').click(function() {
*       $('#largeModal').addClass('in');
*       $('#m-backdrop').addClass('in');
*     });
*     $('.closeModal').click(function() {
*       $('.in').removeClass('in');
*       $('#m-backdrop').removeClass('in');
*     });
*   }); 
* </script>
*
* @section Modal Sizes
* @sectionof Modals
*/
.modal {
  .small-modal.modal-dialog {
    max-width: 36em;
  }
  .large-modal.modal-dialog {
    max-width: 90em;
    width: 100%;
  }
}