/**
 * Modal (<dialog>)
 */
:root,
:host {
  --pico-scrollbar-width: var(--toddyi-size-0px);
}

dialog {
  display: flex;
  z-index: 999;
  position: fixed;
  top: 0;
  inset-inline-end: 0;
  bottom: 0;
  inset-inline-start: 0;
  align-items: center;
  justify-content: center;
  width: inherit;
  min-width: var(--toddyi-size-100pct);
  height: inherit;
  min-height: var(--toddyi-size-100pct);
  padding: 0;
  border: 0;
  -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
  background-color: var(--pico-modal-overlay-background-color);
  color: var(--pico-color);
}
dialog > article {
  width: var(--toddyi-size-100pct);
  max-height: calc(var(--toddyi-size-100vh) - var(--pico-spacing) * 2);
  margin: var(--pico-spacing);
  overflow: auto;
}
@media (min-width: 576px) {
  dialog > article {
    max-width: var(--toddyi-size-510px);
  }
}
@media (min-width: 768px) {
  dialog > article {
    max-width: var(--toddyi-size-700px);
  }
}
dialog > article > header > * {
  margin-bottom: 0;
}
dialog > article > header .close, dialog > article > header :is(a, button)[rel=prev] {
  margin: 0;
  margin-inline-start: var(--pico-spacing);
  padding: 0;
  float: right;
}
dialog > article > footer {
  text-align: end;
}
dialog > article > footer button,
dialog > article > footer [role=button] {
  margin-bottom: 0;
}
dialog > article > footer button:not(:first-of-type),
dialog > article > footer [role=button]:not(:first-of-type) {
  margin-inline-start: calc(var(--pico-spacing) * 0.5);
}
dialog > article .close, dialog > article :is(a, button)[rel=prev] {
  display: block;
  width: var(--toddyi-size-1rem);
  height: var(--toddyi-size-1rem);
  margin-top: calc(var(--pico-spacing) * -1);
  margin-bottom: var(--pico-spacing);
  margin-inline-start: auto;
  border: none;
  background-image: var(--pico-icon-close);
  background-position: center;
  background-size: auto 1rem;
  background-repeat: no-repeat;
  background-color: transparent;
  opacity: 0.5;
  transition: opacity var(--pico-transition);
}
dialog > article .close:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), dialog > article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
  opacity: 1;
}
dialog:not([open]), dialog[open=false] {
  display: none;
}

.modal-is-open {
  padding-inline-end: var(--pico-scrollbar-width, var(--toddyi-size-0px));
  overflow: hidden;
  pointer-events: none;
  touch-action: none;
}
.modal-is-open dialog {
  pointer-events: auto;
  touch-action: auto;
}

:where(.modal-is-opening, .modal-is-closing) dialog,
:where(.modal-is-opening, .modal-is-closing) dialog > article {
  animation-duration: 0.2s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
}
:where(.modal-is-opening, .modal-is-closing) dialog {
  animation-duration: 0.8s;
  animation-name: modal-overlay;
}
:where(.modal-is-opening, .modal-is-closing) dialog > article {
  animation-delay: 0.2s;
  animation-name: modal;
}

.modal-is-closing dialog,
.modal-is-closing dialog > article {
  animation-delay: 0s;
  animation-direction: reverse;
}

@keyframes modal-overlay {
  from {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: transparent;
  }
}
@keyframes modal {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
}