/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Default font family */
@supports (font-variation-settings: normal) {
  body {
    font-family: "InterVariable", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  }
}

@supports not (font-variation-settings: normal) {
  body {
    font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  }
}

/* Dialog styles */
/* Prevent scrolling while dialog is open */
body:has(dialog[data-confirmation-dialog-target="dialog"][open]),
body:has(dialog[data-login-dialog-target="dialog"][open]) {
  overflow: hidden;
}

/* Customize the dialog backdrop */
dialog {
  box-shadow: 0 0 0 100vw rgb(0 0 0 / 0.5);
}

/* Center dialog */
dialog[open] {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

/* Ensure login dialog is centered */
dialog[data-login-dialog-target="dialog"][open] {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  max-width: 28rem;
  width: 90%;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Add animations */
dialog[data-confirmation-dialog-target="dialog"][open],
dialog[data-login-dialog-target="dialog"][open] {
  animation: fade-in 200ms forwards;
}

dialog[data-confirmation-dialog-target="dialog"][closing],
dialog[data-login-dialog-target="dialog"][closing] {
  animation: fade-out 200ms forwards;
}

/* Dropdown styles */
[data-dropdown-target="menu"] {
  animation: fade-in 150ms ease-out;
}

[data-dropdown-target="menu"]:not(.hidden) {
  display: block;
}