.modal {

$modal-width: 400px;
$modal-padding: 30px;

&__container {
  @include position(fixed, 0 0 0 0);
  background-color: rgba($black, 0.7);
  opacity: 0;
  transition: all 0.25s $CurveFastOutSlowIn;
  visibility: hidden;
  z-index: 99999;
  padding: 10px;

  @include media($desktop) {
    padding-top: 160px;
  }
}

&__inner {
  transform: scale(0.5);
  background-color: $white;
  margin: auto;
  max-height: 95%;
  overflow-y: auto;
  position: relative;
  border-radius: $base-border-radius;
  transition: all 0.25s $CurveFastOutSlowIn;
  max-width: $modal-width;
  width: 100%;
  box-shadow:
    0 7px 8px -4px rgba($black, 0.1),
    0 10px 20px 2px rgba($black, 0.1),
    0 5px 47px 10px rgba($black, 0.12);
}

&--open &__container {
  opacity: 1;
  visibility: visible;
}

&--open &__inner {
  transform: scale(1);
}

&__header {
  display: flex;
  padding: $modal-padding;
}

&__close {
  cursor: pointer;
  margin: 0;
  border: 0;
  margin-left: auto;
  background: none;
  padding: 10px;
  position: absolute;
  top: 20px;
  right: 20px;
  border-radius: $base-border-radius;
  transition: background 0.3s ease;

  &:hover,
  &:active,
  &:focus {
    outline: none;
    background: rgba($black, 0.1);
  }
}

&__closeIcon {
  fill: rgba($black, 0.4);
  display: flex;
}

&__title {
  color: $heading-color;
  margin: 0;
  font-size: 20px;
}

&__content {
  padding: 0 $modal-padding $modal-padding;
}

&__centerMessage {
  text-align: center;
  font-size: 18px;
  margin-bottom: 20px;
}

&__iconContainer {
  @include size(100px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba($primary-color, 0.2);
  margin: 0 auto 10px;
}

&__icon {
  @include size(64px);
  fill: $primary-color;
}

&__footer {
  display: flex;
  flex-direction: column;
  padding: 0 $modal-padding $modal-padding;
}

&__finePrint {
  font-size: 14px;
  margin-top: 20px;
  line-height: normal;
}

&__finePrintLink {
  font-size: 14px;
}

}