/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 */

/* Additional custom styles */

/* Sheet nativo: entra da direita. Fora do Tailwind para vencer o stylesheet UA do <dialog>. */
dialog.native-dialog-sheet {
  inset-inline-end: 0;
  margin: 0;
  margin-inline-start: auto;
  height: 100dvh;
  max-height: 100dvh;
  width: min(100vw, 42rem);
  max-width: 42rem;
  overflow: hidden;
  transform: translateX(100%);
  transition: transform 300ms ease-out;
}

dialog.native-dialog-sheet.is-open {
  transform: translateX(0);
}

dialog.native-dialog-sheet::backdrop {
  background: rgb(2 6 23 / 0.7);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 300ms ease-out;
}

dialog.native-dialog-sheet.is-open::backdrop {
  opacity: 1;
}