.swal2-container.swal2-center>.swal2-spinner {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    justify-self: center
}

.modal {

    & .modal-header,
    .modal-footer {
        padding: var(--spacing-20) var(--spacing-24);
    }

    & .modal-body {
        padding: 0 var(--spacing-24);
    }
}

.modal {
    --bs-modal-border-radius: var(--radius-12);
}

.swal2-container .swal2-popup {
    width: 400px;
    max-width: 450px;
    padding: 2rem;
}

.swal2-container .swal2-popup .swal2-html-container {
    font-size: var(--size-14);
    font-weight: 400;
    line-height: var(--size-20);
}

.swal2-icon {
  transform: scale(0.7);
  animation-composition: add;
  margin: 0.5rem auto .6em;
}

.swal2-popup .swal2-actions {
    margin: 0.5rem auto 0.5rem auto;
}

/* Fix z-index issues for Select2 components inside modals */
.modal .select2-container {
    z-index: 2010 !important;
}

.modal .select2-dropdown {
    z-index: 2020 !important;
}

/* Ensure main modal has proper z-index */
.swal2-container {
    z-index: 2000 !important;
}

/* Ensure nested modals (like GDAP roles modal) appear above the main modal */
.swal2-container+.swal2-container {
    z-index: 2100 !important;
}

/* Ensure confirmation dialogs (like cancel confirmation) appear above Select2 components */
.swal2-container[id*="confirmation"] {
    z-index: 2200 !important;
}

/* Alternative selector for confirmation dialogs */
.swal2-container:has(.swal2-icon-warning) {
    z-index: 2200 !important;
}

/* Fix for Select2 components in scrollable modals specifically */
.modal--scrollable .select2-container {
    z-index: 2010 !important;
}

.modal--scrollable .select2-dropdown {
    z-index: 2020 !important;
}

.modal-content .dropdown-menu {
    z-index: 2030 !important;
}

/* Modal Backdrop Animations */
.modal-backdrop-enter {
  animation: fadeIn 0.15s ease-out forwards;
}

.modal-backdrop-exit {
  animation: fadeOut 0.15s ease-out forwards;
}

/* Modal Dialog Animations */
.modal-dialog-enter {
  animation: dialogEnter 0.15s ease-out forwards;
}

.modal-dialog-exit {
  animation: dialogExit 0.15s ease-out forwards;
}

/* modal animation Keyframes */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    /* The visibility hidden hides the modal in case there is some issue removing the modal from the DOM */
    visibility: hidden;
  }
}

@keyframes dialogEnter {
  from {
    opacity: 0;
    transform: translate3d(0, -25px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes dialogExit {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  to {
    opacity: 0;
    transform: translate3d(0, -25px, 0);
  }
}

.modal-footer > #confirmation-dialog {
  margin: 0;
}