// Hide during loading.
modal,
[is="modal"] { display: none; }

// kill the scroll on the body.
.modal-shown {
  overflow: hidden;
}

.modal-mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: $z-index-modal;
  overflow: auto;
  background-color: $modal-mask-color;
}

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 70%;
  margin: 15% auto;
  background-color: $modal-content-bg-color;
  border: 1px solid $border-color;

  @include media-only-mobile {
    width: 90%;
    margin: 5% auto;
  }
}

.modal-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: $space-2;
  background-color: $modal-header-bg-color;

  @include headings {
    margin: 0;
  }

  .close-button {
    font-size: 1.5em;
    color: $modal-close-button-color;
    &:hover { color: $modal-close-button-hover-color; }

    // scss-lint:disable SelectorDepth
    svg path {
      stroke-width: 2px;
    }
  }
}

.modal-body {
  flex-grow: 1;
  padding: $space-2;
}

.modal-footer {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  padding: $space-2;
}

// effect `from-top`
.modal-from-top-enter-active {
  animation: $modal-effect-duration from-top;
}

.modal-from-top-leave-active {
  animation: $modal-effect-duration from-top reverse;
}

// effect `fade`
.modal-fade-enter-active {
  animation: $modal-effect-duration fade-in;
}

.modal-fade-leave-active {
  animation: $modal-effect-duration fade-in reverse;
}