@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;
    }
  }
}

/* stylelint-disable no-descending-specificity */
.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);
  width: var(--_op-modal-width);
  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);
  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 {
    max-height: var(--_op-modal-max-height);
    box-shadow: var(--op-border-all) var(--op-color-border);
    overflow-y: auto;
  }

  .modal__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--op-space-small);
  }
}
/* stylelint-enable no-descending-specificity */

dialog.modal {
  position: fixed;
  display: block;
  padding: 0;
  border: none;
  inset: 0;

  &::backdrop {
    /* The Dialog backdrop does not inheret from :root so these need to be duplicated here. */
    --op-color-black: hsl(0deg 0% 0%);
    --_op-modal-backdrop-active-opacity: 0.5;
    --op-opacity-none: 0;
    --op-opacity-full: 1;

    animation: show-backdrop 300ms ease-in;
    background: var(--op-color-black);
    opacity: var(--_op-modal-backdrop-active-opacity);
  }

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

  &.modal--closing {
    opacity: var(--op-opacity-none);
    transform: scale(0.7);

    &::backdrop {
      animation: hide-backdrop 300ms ease-in;
      opacity: var(--op-opacity-none);
    }
  }
}

/* Using the Dialog element */

/* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog */

@keyframes show-backdrop {
  from {
    opacity: var(--op-opacity-none);
  }

  to {
    opacity: var(--_op-modal-backdrop-active-opacity);
  }
}

@keyframes hide-backdrop {
  from {
    opacity: var(--_op-modal-backdrop-active-opacity);
  }

  to {
    opacity: var(--op-opacity-none);
  }
}