:where(:scope), :host {
  --pico-modal-overlay-backdrop-filter: blur(.375rem);
  --pico-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
}

:where(:scope, [data-theme="light"], [data-theme="dark"]), :host {
  --pico-modal-overlay-background-color: light-dark(#e8eaedbf, #08090abf);
}

:scope, :host {
  --pico-scrollbar-width: 0px;
}

dialog {
  z-index: 999;
  width: inherit;
  min-width: 100%;
  height: inherit;
  min-height: 100%;
  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
  background-color: var(--pico-modal-overlay-background-color);
  color: var(--pico-color);
  border: 0;
  justify-content: center;
  align-items: center;
  padding: 0;
  display: flex;
  position: fixed;
  inset: 0;
}

dialog > article {
  width: 100%;
  max-height: calc(100vh - var(--pico-spacing) * 2);
  margin: var(--pico-spacing);
  overflow: auto;
}

@media (width >= 576px) {
  dialog > article {
    max-width: 510px;
  }
}

@media (width >= 768px) {
  dialog > article {
    max-width: 700px;
  }
}

dialog > article > header > * {
  margin-bottom: 0;
}

dialog > article > header .close, dialog > article > header :is(a, button)[rel="prev"] {
  margin: 0;
  margin-left: var(--pico-spacing);
  float: right;
  padding: 0;
}

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-left: calc(var(--pico-spacing) * .5);
}

dialog > article .close, dialog > article :is(a, button)[rel="prev"] {
  width: 1rem;
  height: 1rem;
  margin-top: calc(var(--pico-spacing) * -1);
  margin-bottom: var(--pico-spacing);
  background-image: var(--pico-icon-close);
  opacity: .5;
  transition: opacity var(--pico-transition);
  background-color: #0000;
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto 1rem;
  border: none;
  margin-left: auto;
  display: block;
}

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-right: var(--pico-scrollbar-width, 0px);
  pointer-events: none;
  touch-action: none;
  overflow: hidden;
}

.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: .2s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
}

:where(.modal-is-opening, .modal-is-closing) dialog {
  animation-name: modal-overlay;
  animation-duration: .8s;
}

:where(.modal-is-opening, .modal-is-closing) dialog > article {
  animation-name: modal;
  animation-delay: .2s;
}

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

@keyframes modal-overlay {
  from {
    backdrop-filter: none;
    background-color: #0000;
  }
}

@keyframes modal {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
}