@use "sass:math";

.modal {
  &.loading {
    .modal-content {
      min-height: 100px;

      display: flex;
      align-items: center;
      justify-content: center;

      &:after {
        @include icon-fa($fa-var-spinner);
        @extend .fa-spin;

        font-size: 2rem;
        opacity: 0.25;
      }
    }
  }

  &.error-modal {
    .modal-header {
      background-color: $error-bg;
    }

    .modal-body {
      padding: 0;
    }
  }

  &.show:not(:last-child),
  &.background {
    z-index: $zindex-modal-backdrop - 1;
    overflow-y: hidden;

    .modal-dialog {
      transform: scale(0.9);
    }
  }
}

.modal-header {
  @extend .theme-bg;

  border-bottom: none;

  .close {
    opacity: 0.75;

    &, &:hover, &:focus {
      color: white;
    }

    &:not(.disabled):not(:disabled) {
      &:hover, &:focus {
        opacity: 1;
      }
    }
  }
}

.modal-title {
  font-size: 1.125rem;
  font-weight: 500;
  text-shadow: rgba(black, 0.5) 0 1px 1px;
  color: white;
}

.modal-tabs {
  .nav-tabs {
    background: $body-bg;
    padding: 0.625rem 1rem 0 1rem;
  }
}

.modal-body {
  // Allow nesting of tab panes directly within
  @extend .tab-content;

  pre.exception {
    max-height: 75vh;
  }
}

.modal-footer {
  background: $modal-footer-bg;

  align-items: flex-start;

  .primary-toolbar {
    margin-left: auto !important;
  }

  .secondary-toolbar {
    margin-right: auto !important;
  }
}

.modal-flash {
  .alert {
    margin-bottom: 0;
    border-radius: 0;
    border-width: 0 0 1px 0;

    padding-top: math.div($alert-padding-y, 2);
    padding-bottom: math.div($alert-padding-y, 2);

    .alert-icon {
      font-size: 36px;
      margin-right: $alert-padding-x * 0.75;
    }

    h3 {
      font-size: 1.125rem;
    }

    p {
      font-size: 0.825rem;
    }
  }
}

.modal-backdrop {
  &.loading {
    display: flex;
    align-items: center;
    justify-content: center;

    &:after {
      @include icon-fa($fa-var-spinner);
      @extend .fa-spin;

      font-size: 5rem;

      color: white;
      opacity: 0.25;
    }
  }

  &.show + &.show {
    opacity: 0;
  }
}