.modal-content {

  @include box-shadow($modal-box-shadow);

  border: 0;

  .modal-header {
    align-items: center;
    display: flex;
    height: $modal-header-height;
    min-height: $modal-header-height;

    padding: $margin-m;

    .close {
      margin: 0 0 0 auto;
      padding: 0;
      opacity: 1;
      order: 2;

      svg {
        fill: $modal-close-svg-color;
      }

      &:active {
        svg {
          fill: $color-white;
        }
      }
    }

    .modal-title {
      line-height: $line-height-h4;
    }
  }

  .modal-body {
    min-height: 0;
    padding: $margin-m;

    p:last-child {
      margin-bottom: 0;
    }
  }

  .modal-footer {
    padding: $margin-m;
    text-align: right;
  }
}

.modal-original {
  .modal-content {
    .modal-body {
      min-height: 176px;
    }
  }
}

.modal-message {
  .modal-content {
    .modal-body {
      font-size: 18px;
      min-height: 0;
      padding-top: $margin-xl;
      text-align: center;
    }

    .modal-footer {
      border-top: 0;
      padding: $margin-m $margin-m $margin-l;
      justify-content: center;
    }
  }
}

.modal-backdrop {
  background-color: transparent;

  &.in {
    opacity: 0.4;
  }
}

@media (min-width: 1100px) {
  .modal-xl {
    width: $modal-xl;
  }
}


// Remove sliding in from the fade animation
.modal.in .modal-dialog {
  transform: translate(0, 0);
}

.modal:not(.modal-original):not(.modal-message) {
  &.fade {
    opacity: 1;
  }

  .modal-content {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .modal-body {
    overflow-y: auto;
  }

  .modal-footer {
    margin-top: auto;
  }

  //Slide in
  .modal-dialog {
    height: 100%;
    margin: auto;
    max-width: 95%;
    position: fixed;

    right: -1 * $modal-md;
    transform: translate3d(0%, 0, 0);
    transition: opacity 0.3s linear, right 0.3s ease-out;
    width: $modal-md;

    &.modal-xl {
      right: -1 * $modal-xl;
      width: $modal-xl;
    }

    &.modal-lg {
      right: -1 * $modal-lg;
      width: $modal-lg;
    }

    &.modal-sm {
      right: -1 * $modal-sm;
      width: $modal-sm;
    }
  }

  &.show {
    .modal-dialog {
      right: 0;

      &.modal-xl,
      &.modal-lg,
      &.modal-sm {
        right: 0;
      }
    }
  }

}