.inputDialog {
  --animationDuration: 300ms;
  --modalAnimationDelay: 100ms;
  --maxWidth: auto;

  position: fixed;
  z-index: var(--elevation--modal);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  display: flex;
  flex-direction: column;

  background-color: rgb(var(--background--neutral-full-default--light) / var(--blend--medium--light));
}

@media (prefers-reduced-motion: reduce) {
  .inputDialog {
    --animationDuration: 0ms;
  }
}

.inputDialog--maxWidthSm { --maxWidth: var(--screen--width-sm); }
.inputDialog--maxWidthMd { --maxWidth: var(--screen--width-md); }
.inputDialog--maxWidthLg { --maxWidth: var(--screen--width-lg); }
.inputDialog--maxWidthXl { --maxWidth: var(--screen--width-xl); }
.inputDialog--maxWidthXxl { --maxWidth: var(--screen--width-xxl); }

@keyframes input-dialog--modal-overlay-fade {
  from { opacity: 0 }
  to { opacity: 1 }
}

@keyframes input-dialog--presentation-sheet {
  from {
    transform: translateY(100%);
    opacity: var(--blend--full--light);
  }
  to {
    transform: translateY(0);
    opacity: var(--blend--solid--light);
  }
}

.inputDialog--presentationSheet {
  --animationName: input-dialog--presentation-sheet;

  justify-content: flex-end;
}

@keyframes input-dialog--presentation-prompt {
  from {
    transform: scale(0.98) translateY(10%);
    opacity: var(--blend--full--light);
  }
  to {
    transform: scale(1) translateY(0);
    opacity: var(--blend--solid--light);
  }
}

.inputDialog--presentationPrompt {
  --animationName: input-dialog--presentation-prompt;
}

.inputDialog--presentationPrompt:not(.inputDialog--sizeFullScreen) {
  padding: var(--padding--lg);
}

.inputDialog[data-entering] {
  animation-name: input-dialog--modal-overlay-fade;
  animation-duration: var(--animationDuration);
  animation-timing-function: ease;
}

.inputDialog[data-exiting] {
  animation-name: input-dialog--modal-overlay-fade;
  animation-duration: var(--animationDuration);
  animation-timing-function: ease;
  animation-direction: reverse;
}

.inputDialog__modal {
  display: flex;
  flex-direction: column;
  align-items: stretch;

  max-width: 100vw;
  max-width: 100dvw;
  max-height: 100vh;
  max-height: 100dvh;
  padding-bottom: calc(100vh - var(--visual-viewport-height, 0px));
  padding-bottom: calc(100dvh - var(--visual-viewport-height, 0px));

  background-color: rgb(var(--background--neutral-base-default--light));
  box-shadow: var(--shadow--medium-soft--light), var(--shadow--medium-sharp--light);

  animation-duration: var(--animationDuration);
  animation-timing-function: ease;
}

.inputDialog__modal[data-entering] {
  animation-name: var(--animationName);
}

.inputDialog__modal[data-exiting] {
  animation-name: var(--animationName);
  animation-direction: reverse;
}

:where(.inputDialog--presentationSheet) .inputDialog__modal {
  width: 100vw;
  width: 100dvw;
}

:where(.inputDialog--presentationPrompt.inputDialog--sizeFitContent) .inputDialog__modal {
  width: 100%;
  max-width: var(--maxWidth);
  margin: auto;
}

:where(.inputDialog--sizeFullScreen) .inputDialog__modal {
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
}

.inputDialog__dialog {
  --padding: var(--padding--md);
  --gap: var(--gap--sm);

  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: var(--gap);
  align-items: stretch;

  min-height: 0;
  padding: var(--padding);
}

.inputDialog__header,
.inputDialog__input,
.inputDialog__body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.inputDialog__headerInner,
.inputDialog__bodyInner {
  display: flex;
  flex: 1 1 100%;
  gap: var(--gap--xs);

  width: 100%;
  min-width: 0;
  max-width: var(--maxWidth);
}

.inputDialog__headerInner {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.inputDialog__headerTitle .typography {
  margin: 0;
}

.inputDialog__inputInner {
  display: flex;
  flex: 1 1 100%;
  flex-direction: column;
  align-items: stretch;

  width: 100%;
  min-width: 0;
  max-width: var(--maxWidth);
}

.inputDialog__body {
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 1 1 100%;
  align-items: stretch;

  margin-top: calc(-1 * var(--gap));
  margin-right: calc(-1 * var(--padding));
  margin-bottom: calc(-1 * var(--padding));
  margin-left: calc(-1 * var(--padding));
}

.inputDialog__bodyInner {
  flex-direction: column;
  align-self: center;

  max-width: calc(var(--maxWidth) + 2 * var(--padding));
  padding-right: var(--padding);
  padding-bottom: var(--padding);
  padding-left: var(--padding);
}

.inputDialog__divider {
  width: 100%;
  max-width: var(--maxWidth);
  margin: auto;

  &::before {
    content: '';

    display: block;

    min-width: 1px;
    min-height: 1px;
    margin: -0.5px;

    background-color: rgb(var(--border--neutral-low-default--light));
  }
}