@import "compass";

// ************************************************************************************
// MODAL
// ************************************************************************************

body {
  div.modal-box-scroll-bar {
    position: absolute;
    top: -9999px;
    width: 50px;
    height: 50px;
    overflow: scroll;
  }

  &.modal-box-open { overflow: hidden; }
}

div.modal-box {
  opacity: 0;
  width: 100%; height: 100%;
  position: fixed;
  top: 0; bottom: 0;
  left: 0; right: 0;
  z-index: 999;
  background-color:rgba(0,0,0,0.4);
  overflow-x: hidden;
  overflow-y: auto;
  visibility: hidden;
  @include transition(visibility 0.3s linear 0.5s, opacity 0.5s linear);
  transition-delay: 0s;

  &.active { visibility: visible; opacity: 1; }

  &>.inner {
    background: #fbfbfb;
    color: #101010;
    padding: 25px 35px;
    margin: 100px auto;
    width: 600px; height: auto;
    box-sizing: border-box;
    position: relative;

    a { color: #101010; }

    button.close {
      display: block;
      position: absolute;
      font-size: 22px;
      line-height: 11px;
      right: 10px; top: 10px;
      opacity: 0.5;
      background: none;
      border: none;

      &.close:hover { opacity: 1; }
    }

    &.default-in {
      -webkit-animation-name: defaultIn;
      animation-name: defaultIn;
    }

    &.default-out {
      -webkit-animation-name: defaultOut;
      animation-name: defaultOut;
    }
  }

  &.stylized>.inner {
    border: 1px solid #dcdee0;
    border-radius: 5px;
    @include box-shadow(0 3px 9px rgba(0,0,0,.5));
  }
}

@keyframes defaultIn {
  0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); }
  100% { opacity: 1; -webkit-transform: none; transform: none; }
}

@keyframes defaultOut {
  0% { opacity: 1; }
  100% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); }
}