/**
 * Smart-Dialog
 *   - State:
 *       1. closed
 *       2. opening
 *       3. opened - content visible
 *       4. closing
 * Default scale: 1920x1080 (2*sqrt(960*960 + 1080*1080) / 20 = 144.5)
 */

smart-dialog {
  position: fixed;
  z-index: 2147483647;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

smart-dialog:before {
  content: attr(title);
  display: block;
  margin-top: 5rem;
  margin-left: 7.6rem;
  font-family: "Fira Sans";
  font-size: 5.4rem;
  font-style: italic;
  color: #ffffff;
}

smart-dialog:after {
  content: "";
  display: block;
  position: fixed;
  height: 2rem;
  width: 2rem;
  top: calc(100% - 1rem);
  left: calc(50% - 1rem);
  background-color: rgba(0, 0, 0, 0.9);
  transition: none;
  transform: scale(20);
}

smart-dialog.closed > *,
smart-dialog.closing > *,
smart-dialog.opening > *,
smart-dialog.closed:before,
smart-dialog.closing:before,
smart-dialog.opening:before {
  display: none;
}

smart-dialog.closed {
  visibility: hidden;
}

smart-dialog.opened {
  background-color: rgba(0, 0, 0, 0.9);
}

smart-dialog.opened:after {
  visibility: hidden;
  border-radius: 50%;
  transform: scale(144.5);
}

smart-dialog.opening:after {
  border-radius: 50%;
  transform: scale(144.5);
  /* transitionDuration should be the same as openDuration variable in script */
  transition: transform 1s cubic-bezier(0, 0, 0 ,1);
}

smart-dialog.closing:after {
  border-radius: 50%;
  transform: scale(20);
  /* transitionDuration should be the same as closeDuration variable in script */
  transition: transform 0.65s cubic-bezier(0.6, 0, 1 ,1);
}

/* 1280x800 for flatfish */
@media (width: 1280px) and (height: 800px) {
  smart-dialog:after,
  smart-dialog.closing:after {
    transform: scale(7.5);
  }

  smart-dialog.opening:after {
    transform: scale(102.5);
  }
}

/* 800x1280 for flatfish vertical */
@media (width: 800px) and (height: 1280px) {
  smart-dialog:after,
  smart-dialog.closing:after {
    transform: scale(8.3);
  }

  smart-dialog.opening:after {
    transform: scale(134);
  }
}