.modal {
  --_op-modal-width: 60rem;
  --op-color-background: var(--op-color-neutral-plus-nine);

  border-radius: var(--op-radius-x-large);
  transition-duration: 150ms;
  contain: unset;
  display: flex;
  flex-direction: column;

  .modal__body--min-height-small {
    min-height: 10rem;
  }

  .modal__body--min-height {
    min-height: 40rem;
  }

  .modal__footer {
    justify-content: space-between;
  }

  .modal__body {
    background-color: var(--op-color-background);
    overflow-y: auto;
    flex-grow: 1;
  }
}

dialog.modal {
  &::backdrop {
    animation: show-backdrop 150ms ease-in;
  }
}

.modal--full {
  .modal {
    --_op-modal-width: 60rem;

    border-radius: var(--op-radius-2x-large);
    width: 90vw;
    max-width: 96rem;

    .modal__body {
      background-color: var(--op-color-neutral-plus-max);
      --_op-modal-max-height: 70rem;
    }

    trix-editor {
      --editor-hardcoded-height: 65vh;
      --editor-hardcoded-max-height: 60rem;

      border-radius: var(--op-radius-large);
      height: var(--editor-hardcoded-height);
      max-height: var(--editor-hardcoded-max-height);
      padding: var(--op-space-x-small);
      background-color: var(--op-color-neutral-plus-seven);
      overflow-y: auto;

      &:focus-visible {
        outline: none;
        box-shadow: var(--op-border-all) var(--op-color-neutral-plus-four);
      }
    }

    /* --op-breakpoint-small */
    @media only screen and (max-width: 768px) {
      width: 100%;
      height: 90vh;
      trix-editor {
        height: 62vh;
      }
    }
  }

  .modal__footer {
    padding: var(--op-space-small);
    /* --op-breakpoint-small */
    @media only screen and (max-width: 768px) {
      padding: var(--op-space-x-small);
    }
  }
}

.modal--no-body-padding {
  .modal__body {
    padding: 0;
  }
}