overleaf-cep/services/web/frontend/stylesheets/components/modal.scss

:root {
  --bs-heading-color: var(--content-primary);
}

@include theme('default') {
  .modal:not(.modal-themed) {
    // Until we add a dark modal version, all core components in modals should use light theme
    @include light-themed-variables;
    @include light-dropdown-menu;
    @include light-notification;
    @include light-select;
    @include form-check-light;
    @include form-select-light;

    .form-control,
    .form-control-wrapper {
      @include light-input;
    }

    .btn {
      @include light-buttons;
    }
  }

  .modal-themed {
    --bs-modal-color: var(--content-primary-dark);
    --bs-modal-bg: var(--bg-dark-primary);
    --bs-modal-border-color: var(--border-divider-dark);
    --bs-modal-box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 40%);
    --bs-modal-header-border-color: var(--border-divider-dark);
    --bs-modal-footer-bg: var(--bg-dark-primary);
    --bs-modal-footer-border-color: var(--border-divider-dark);
    --bs-heading-color: var(--content-primary-dark);

    color-scheme: dark;

    .modal-header .btn-close {
      --bs-btn-close-bg: url('data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27%23fff%27%3e%3cpath d=%27M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414%27/%3e%3c/svg%3e');
    }
  }

  .modal-backdrop-themed {
    background-color: var(--neutral-70);
  }
}

@include media-breakpoint-up(sm) {
  .modal-dialog {
    @include modal-md;
  }

  .modal-sm {
    @include modal-sm;
  }
}

@include media-breakpoint-up(md) {
  .modal-md {
    @include modal-md;
  }
}

@include media-breakpoint-up(lg) {
  .modal-lg {
    @include modal-lg;
  }
}

// OLModal wraps children in a FocusTrap that renders a <div> between
// .modal-content and .modal-header/.modal-body/.modal-footer, breaking
// Bootstrap's flex chain for scrollable modals. display: contents makes the
// wrapper invisible to the layout engine so Bootstrap's flex/overflow chain
// reaches .modal-body correctly.
.modal-dialog-scrollable .modal-content > .focus-trap-container {
  display: contents;
}

.modal-content {
  @include shadow-lg;

  border-radius: var(--border-radius-base);

  .modal-header {
    .modal-title {
      @include heading-sm;

      line-height: 35px;
    }

    .btn-close {
      margin-right: 0;
    }
  }

  .modal-footer {
    padding: var(--spacing-06);
    gap: var(--spacing-04);

    > * {
      margin: 0;
    }
  }
}

// Git bridge modal
.git-bridge-copy {
  background: var(--bg-light-secondary);
  color: var(--content-primary);
  padding: var(--spacing-05);
  border-radius: var(--border-radius-base);
  display: flex;
  justify-content: center;
  gap: var(--spacing-05);
  align-items: center;
  margin: var(--spacing-09) 0;

  & code {
    color: var(--content-primary);
    word-break: break-word;
  }
}

.git-bridge-optional-tokens {
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius-base);
  padding: var(--spacing-07);
  margin: var(--spacing-09) 0;
}

.git-bridge-optional-tokens-header {
  font-size: 120%;
  font-weight: bold;
  margin-bottom: var(--spacing-05);
}

.git-bridge-optional-tokens-actions {
  margin-top: var(--spacing-05);
}

.upgrade-track-changes-modal {
  .teaser-title {
    font-family: var(--font-sans);
    font-size: var(--font-size-05);
    margin-bottom: var(--spacing-05);
    margin-top: var(--spacing-05);
    color: var(--content-secondary);
  }

  ul.list-unstyled li {
    font-family: var(--font-sans);
    padding: var(--spacing-02) 0;
    color: var(--content-secondary);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-04);
  }

  ul.list-unstyled li .check-icon {
    padding-top: 2px;
  }
}