@rolemodel/optics/dist/css/components/modal.css

Optics is a css package that provides base styles and components that can be integrated and customized in a variety of projects.

.modal-wrapper {
  /* Public API (customizable component options) */
  --_op-modal-backdrop-active-opacity: var(--op-opacity-half);

  position: fixed;
  z-index: var(--op-z-index-dialog);
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  inset: 0;
  outline: 0;
  visibility: hidden;

  /* Elements */

  .modal-wrapper__backdrop {
    position: fixed;
    z-index: var(--op-z-index-dialog-backdrop);
    background: var(--op-color-black);
    inset: 0;
    opacity: var(--op-opacity-none);
    transition: var(--op-transition-modal);
    visibility: hidden;
  }

  /* Modifiers */

  &.modal-wrapper--active {
    visibility: visible;

    .modal {
      opacity: var(--op-opacity-full);
      transform: scale(1);
    }

    .modal-wrapper__backdrop {
      opacity: var(--_op-modal-backdrop-active-opacity);
      visibility: visible;
    }
  }
}

.modal {
  /* Public API (customizable component options) */
  --_op-modal-width: calc(141 * var(--op-size-unit)); /* 564px */
  --_op-modal-max-height: calc(125 * var(--op-size-unit)); /* 500px */

  z-index: var(--op-z-index-dialog-content);
  border-radius: var(--op-radius-medium);
  background-color: var(--op-color-background);
  box-shadow: var(--op-border-all) var(--op-color-border);
  color: var(--op-color-on-background);
  contain: paint;
  font-size: var(--op-font-medium);
  inline-size: var(--_op-modal-width);
  line-height: var(--op-line-height-base);
  opacity: var(--op-opacity-none);
  transform: scale(0.7);
  transition: var(--op-transition-modal);

  .modal__header,
  .modal__body,
  .modal__footer {
    padding: var(--op-space-medium);
  }

  .modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--op-font-large);
    font-weight: var(--op-font-weight-semi-bold);
  }

  .modal__body {
    box-shadow: var(--op-border-all) var(--op-color-border);
    max-block-size: var(--_op-modal-max-height);
    overflow-y: auto;
  }

  .modal__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--op-space-small);
  }
}

dialog.modal {
  padding: 0;
  border: none;
  overscroll-behavior: contain;
  transform: scale(0.7);
  transition:
    display var(--op-transition-modal-time) allow-discrete,
    overlay var(--op-transition-modal-time) allow-discrete,
    transform var(--op-transition-modal-time),
    opacity var(--op-transition-modal-time);

  &::backdrop {
    overflow: hidden;
    background-color: var(--op-color-black);
    opacity: var(--op-opacity-none);
    overscroll-behavior: contain;
    transition:
      display var(--op-transition-modal-time) allow-discrete,
      overlay var(--op-transition-modal-time) allow-discrete,
      transform var(--op-transition-modal-time),
      opacity var(--op-transition-modal-time);
  }

  &[open] {
    opacity: var(--op-opacity-full);
    transform: scale(1);

    &::backdrop {
      opacity: var(--op-opacity-half);
    }
  }
}

@starting-style {
  dialog.modal[open] {
    transform: scale(0.7);

    &::backdrop {
      opacity: var(--op-opacity-none);
    }
  }
}