/*
 * rails-ui-kit component styles
 *
 * Horizontal centring is `inset-inline: 0` plus `margin-inline: auto` on the component's own
 * classes, never `left: 50%` with a translate: a fixed element's `left` is resolved against the
 * inline start in a right-to-left document, which put a centred Modal half off-screen at narrow
 * widths (found by the stress page; see docs/specs/ui-stress-page/status.md). So these transforms
 * carry the vertical movement only.
 *
 * Modal transform states used by Ui::ModalComponent. The component renders one
 * modal-<position>-hidden class; ui--presence's data-state="open" selects the visible
 * transform, and the dialog's `transition-all duration-300 ease-in-out` animates between
 * them, in and out.
 */

.modal-center-hidden {
  transform: translateY(-50%) scale(0.95);
}

.modal-center-hidden[data-state="open"] {
  transform: translateY(-50%) scale(1);
}

.modal-full-screen-hidden {
  transform: scale(0.95);
}

.modal-full-screen-hidden[data-state="open"] {
  transform: scale(1);
}

.modal-right-hidden {
  transform: translateX(100%);
}

.modal-right-hidden[data-state="open"] {
  transform: translateX(0);
}

.modal-left-hidden {
  transform: translateX(-100%);
}

.modal-left-hidden[data-state="open"] {
  transform: translateX(0);
}

.modal-top-hidden {
  transform: translateY(-100%);
}

.modal-top-hidden[data-state="open"] {
  transform: translateY(0);
}

.modal-top-full-hidden {
  transform: translateY(-100%);
}

.modal-top-full-hidden[data-state="open"] {
  transform: translateY(0);
}

.modal-bottom-hidden {
  transform: translateY(100%);
}

.modal-bottom-hidden[data-state="open"] {
  transform: translateY(0);
}

.modal-bottom-full-hidden {
  transform: translateY(100%);
}

.modal-bottom-full-hidden[data-state="open"] {
  transform: translateY(0);
}