:host {

  --modal-box-shadow: 2px 5px 15px rgba(0, 0, 0, 0.3);
  --modal-border-radius: var(--border-radius);
  --modal-background: var(--white);

  --modal-dimmer-background: var(--black-50);

  --modal-max-width: calc(100vw - 2rem);


  --modal-transition: all 300ms ease 100ms;

  --modal-dialog-transition-duration: 200ms;
  --modal-dialog-transition:
    opacity var(--modal-dialog-transition-duration) ease,
    scale var(--modal-dialog-transition-duration) ease,
    overlay var(--modal-dialog-transition-duration) ease allow-discrete,
    display var(--modal-dialog-transition-duration) ease allow-discrete;

  --modal-dimmer-transition-duration: 700ms;
  --modal-dimmer-transition:
    display var(--modal-dimmer-transition-duration) allow-discrete,
    overlay var(--modal-dimmer-transition-duration) allow-discrete,
    background var(--modal-dimmer-transition-duration);
}