$modal-bg-color: $white !default;
$modal-max-width: 1200px !default;
$modal-content-padding: 20px !default;
$modal-border-radius: 5px !default;
$modal-border: 5px solid $white !default;
$modal-close-size: 30px !default;
$modal-close-color: $copy-color !default;
$modal-close-transform: rotate(45deg) !default;

.modal {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,.3);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: -1;
  opacity: 0;
  transition: 500ms opacity;

  &.modal-tall {
    align-items: flex-start;
    padding-top: 32px;
    overflow: scroll;
  }

  &.active {
    z-index: 9999;
    opacity: 1;
  }

  .modal-content {
    position: relative;
    background: $modal-bg-color;
    border-radius: $modal-border-radius;
    padding: $modal-content-padding;
    border: $modal-border;
    max-width: $modal-max-width;

    .modal-close {
      position: absolute;
      top: 0;
      right: 15px;
      color: $modal-close-color;
      font-size: $modal-close-size;
      cursor: pointer;
      transition: all 300ms;
      transform: $modal-close-transform;

      &:hover { color: lighten($modal-close-color, 5%); }
    }
  }
}