/*
 * Modal
 * A lightbox
 */
.o-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  
  width: calc(100% - 24px);
  max-width: 960px;
  height: calc(100% - 24px);
  max-height: 672px;
  overflow-y: hidden;

  border-radius: 5px;

  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);

  @include breakpoint(sm) {
    width: calc(100% - #{$global-spacing-unit*6});
  }

  @include breakpoint(md) {
    width: calc(100% - #{$global-spacing-unit*9});
  }

  @media (min-height: 600px) {
    height: calc(100% - #{$global-spacing-unit*6});
  }
}

.o-modal--additional {
  z-index: 100000;
}

.o-modal--auto {
  transform: translate(-50%, -50%) translate(.5px, .5px); 
  height: auto;
  width: auto;

  &\@md {
    @media (min-width: 840px) and (min-height:600px) {
      height: auto;
      width: auto;
    }
  }
}

.o-modal--small {
  max-width: 40rem;
  max-height: 30rem;
}

.o-modal--large {
  max-height: 50rem;
}

/*.o-modal--max {
  height: calc(100% - 6rem);
}*/

.o-modal__close {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 20px;
  height: 20px;

  background: url(../img/ui/close-icon.png) no-repeat scroll 0 0 transparent;
  cursor: pointer;
}

.o-modal__body {
  height: 100%;
  overflow-y: auto;
}