@keyframes base-modal-layout-enter {
  from {
    opacity: 0;
    transform: scale(0.92, 0.99);
  }

  to {
    opacity: 1;
    transform: scale(1, 1);
  }
}

.base-modal-layout {
  --wds-custom-modal-border-radius: var(--wds-border-radius-surface-modal);
  --wds-custom-modal-content-padding-horizontal: var(--wds-space-600);
  --wds-custom-modal-content-padding-vertical: var(--wds-space-600);
  --wds-custom-modal-header-padding-left: var(--wds-space-600);
  --wds-custom-modal-header-padding-right: var(--wds-space-500);
  --wds-custom-modal-header-padding-vertical: var(--wds-space-600);
  --wds-custom-modal-header-subtitle-font-size: var(--wds-font-size-body-small);
  --wds-custom-modal-header-subtitle-font-line-height: var(--wds-font-line-height-body-small);
  --wds-custom-modal-footer-padding-horizontal: var(--wds-space-600);
  --wds-custom-modal-footer-padding-vertical: var(--wds-space-600);
  --wds-custom-modal-footnote-padding-horizontal: var(--wds-space-600);
  --wds-custom-modal-footnote-padding-vertical: var(--wds-space-400);
  --wds-custom-modal-footnote-text-font-size: var(--wds-font-size-body-tiny);
  --wds-custom-modal-footnote-text-font-line-height: var(--wds-font-line-height-body-tiny);
  --wds-custom-modal-footnote-text-font-weight: var(--wds-font-weight-medium);

  /* stylelint-disable-next-line plugin/use-baseline -- the --wds-internal-theme style container query the theming system gates on */
  @container style(--wds-internal-theme: odeditor) {
    animation: base-modal-layout-enter 300ms cubic-bezier(0, 0, 0.25, 1);

    @media (prefers-reduced-motion) {
      animation: none;
    }
  }
}