:root {
  color-scheme: light dark;
  font-family: "Oxanium", sans-serif;
}

/* Ensure everything stays within the pbi-modal element */
true-modal {
  display: grid;
}

/* Base style for the dialog when it has the `open` attribute */
true-modal dialog[open] {
  display: grid;
  position: fixed;
  inset: 0;
  place-self: center;
  width: 80%;
  max-width: 40em;
  padding: 1.5em;
  /* border: solid 0.125rem #669eda; */
  border: none;
  border-radius: 0.75em;
  background: Canvas;
  color: CanvasText;
  box-shadow: 0 1rem 3rem rgb(0 0 0 / 0.35);
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  visibility: visible;
  transition: opacity 500ms ease, transform 500ms ease;
  z-index: 10;
}

/* Starting style to transition in on initial render */
true-modal dialog[open] {
  @starting-style {
    opacity: 0;
    transform: scale(0.97);
  }
}

/* When the checkbox is unchecked, hide the dialog completely */
true-modal dialog:not([open]) {
  display: none;
}

/* Ensure modal content appears above the overlay */
true-modal dialog[open] > * {
  position: relative;
  z-index: 1;
}

/* Overlay implemented via pseudo-element on pbi-modal */
true-modal::before {
  content: "";
  position: fixed;
  inset: 0;
  /* background: rgba(0, 0, 0, 1); */
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
  z-index: 5;
}

/* Show the overlay and disable page interaction when the modal is open (checkbox checked) */
true-modal:has(dialog[open])::before {
  opacity: 1;
  pointer-events: auto;
}

/* Disable interaction with the rest of the page when the modal is open */
true-modal:has(dialog[open]) > :not(dialog) {
  pointer-events: none;
  user-select: none;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  true-modal dialog[open] {
    transition: none;
    transform: none;
  }
  true-modal::before {
    transition: none;
  }
}

true-modal dialog form {
  display: grid;
  margin: 0;
  padding: 0;
}

true-modal dialog form button {
  background-color: rgb(240 150 9 / 0);
  padding: 1rem 2rem;
  margin-block: 1.5em;
  border: solid 0.03em #007bff;
  border-radius: 0.3em;
  width: fit-content;
  justify-self: center;
  color: currentcolor;
  cursor: pointer;
  transition: all 250ms;

  &:hover {
    background-color: #007bff;
    color: canvas;
  }

  /*   &:focus-visible {
    outline: solid 4px rgb(255 255 255 / 1);
    background-color: rgb(240 150 9/1);
    color: canvas;
  } */
}