*:not(.is-dialog-open) {
  .dialog {
    &.dialog-sheet {
      .dialog_content {
        animation: dialog-sheet-out 300ms ease-in-out;
      }
    }
  }
}

.is-dialog-open {
  .dialog {
    &.dialog-sheet {
      .dialog_content {
        animation: dialog-sheet-in 300ms ease-in-out;
      }
    }
  }
}

.dialog {
  &.dialog-sheet {
    .dialog_content {
      top: auto;
      right: 0;
      bottom: 0;
      left: 0;
      min-width: 100%;
      max-width: 100%;
      transform: none;
      animation: dialog-sheet-in 300ms ease-in-out;
    }
  }
}

@keyframes dialog-sheet-in {
  from {
    opacity: 0;
    transform: translate(0, 100%);
  }
  to {
    opacity: 1;
    transform: translate(0, 0%);
  }
}

@keyframes dialog-sheet-out {
  from {
    opacity: 1;
    transform: translate(0, 0%);
  }
  to {
    opacity: 0;
    transform: translate(0, 100%);
  }
}

*:not(.is-dialog-open) {
  .dialog {
    &.dialog-sheet {
      .dialog_content {
        animation: dialog-sheet-out 300ms ease-in-out;
      }
    }
  }
}

.is-dialog-open {
  .dialog {
    &.dialog-sheet {
      .dialog_content {
        animation: dialog-sheet-in 300ms ease-in-out;
      }
    }
  }
}

.dialog {
  &.dialog-sheet {
    .dialog_content {
      top: auto;
      right: calc(100vw - 16px);
      bottom: 32px;
      left: 16px;
      transform: none;
      animation: dialog-sheet-in 300ms ease-in-out;
    }
  }
}

@keyframes dialog-sheet-in {
  from {
    opacity: 0;
    transform: translate(0, 100%);
  }
  to {
    opacity: 1;
    transform: translate(0, 0%);
  }
}

@keyframes dialog-sheet-out {
  from {
    opacity: 1;
    transform: translate(0, 0%);
  }
  to {
    opacity: 0;
    transform: translate(0, 100%);
  }
}

Reposition sheet dialog to support better touchability.
feat(Dialogs): Reposition sheet dialog to support better touchability.
