// variables
$modal-body-height: 80px;
$modal-body-line-height: 1.5;

// mixins
@mixin gl-tmp-modal-btn-group-ml {
  margin-left: -1px;
}

body.modal-open {
  @apply gl-overflow-hidden;
}

.gl-modal {
  @apply gl-@container/gl-modal;

  .modal-dialog-scrollable {
    @include media-breakpoint-up(sm) {
      max-height: calc(100% - #{$gl-spacing-scale-11 * 2});
    }
  }

  .modal-sm {
    max-width: $gl-modal-small-width;
  }

  .modal-md {
    max-width: $gl-modal-medium-width;
  }

  .modal-lg {
    max-width: $gl-modal-large-width;
  }

  .modal-xl {
    max-width: 98%;
  }

  .modal-content {
    @apply gl-border-0;
    @apply gl-shadow-lg;
    @apply gl-text-default;
    @apply gl-bg-overlap;
    border-radius: var(--gl-modal-border-radius);

    > :first-child {
      border-top-left-radius: var(--gl-modal-border-radius);
      border-top-right-radius: var(--gl-modal-border-radius);
    }

    > :last-child {
      border-bottom-left-radius: var(--gl-modal-border-radius);
      border-bottom-right-radius: var(--gl-modal-border-radius);
    }
  }

  .modal-header {
    @apply gl-pb-3;
    @apply gl-border-none;

    .modal-title {
      @apply gl-heading-scale-500;
    }
  }

  .modal-body {
    min-height: $modal-body-height;
    line-height: $modal-body-line-height;
    position: relative;
    @apply gl-p-5;
    @apply gl-py-3;
    @apply gl-text-left;
    @apply gl-whitespace-normal;
    @apply gl-text-base;
    @apply gl-leading-20;
  }

  .modal-footer {
    @apply gl-flex;
    @apply gl-flex-row;
    @apply gl-p-5;
    @apply gl-pt-3;
    @apply gl-border-none;

    .btn {
      @apply gl-m-0;
    }

    .btn + .btn:not(.dropdown-toggle-split),
    .btn + .btn-group,
    .btn-group + .btn {
      @apply gl-ml-3;
    }

    .btn-group .btn + .btn {
      @include gl-tmp-modal-btn-group-ml;
    }

    @include media-breakpoint-down(xs) {
      @apply gl-flex-col;

      .btn + .btn:not(.dropdown-toggle-split),
      .btn + .btn-group,
      .btn-group + .btn {
        @apply gl-ml-0;
        @apply gl-mt-3;
      }

      .btn-group .btn + .btn {
        @include gl-tmp-modal-btn-group-ml;
        @apply gl-mt-0;
      }
    }
  }

  ~ .modal-backdrop {
    @apply gl-bg-overlay;
    opacity: 1;
  }

  @include media-breakpoint-up(sm) {
    .modal-dialog {
      @apply gl-mx-auto;
      @apply gl-my-0;
      @apply gl-flex;
      @apply gl-items-center;
      min-height: calc(100% - 1rem);
    }
  }
}