.modal-overlay { top: 0; left: 0; bottom: 0; right: 0; align-items: center; background-color: var(--color-background-overlay); display: flex; justify-content: center; position: fixed; z-index: 9999; } .modal { @extend .card; background-color: var(--color-card-background); line-height: 1.55; max-width: var(--modal-width); overflow: auto; padding: var(--spacing-large); word-break: break-word; &:focus { box-shadow: none; } @media (min-width: 501px) { min-width: 500px; } } .modal--card-internal { padding: 0; .card { margin: 0; } } .error-modal__content { display: flex; padding: 0 var(--spacing-medium) var(--spacing-medium) var(--spacing-medium); } .error-modal { max-width: none; width: var(--modal-width); white-space: pre-wrap; } .error-modal__error-list { max-width: var(--modal-width); max-height: 400px; margin-top: var(--spacing-small); padding: var(--spacing-small); background-color: var(--color-error); border-left: 2px solid var(--color-text-error); color: var(--color-text-error); list-style: none; overflow-y: scroll; white-space: pre-wrap; }