/* -----------------------------------------------------------------------------
 * BASE
 * -------------------------------------------------------------------------- */
/* dialog */
.widget {
  /* -----------------------------------------------------------------------------
   * SECTIONING
   * -------------------------------------------------------------------------- */
}
.widget .modal {
  --modal-background: var(--color-ink-2ry);
  --modal-border-radius: var(--border-radius-base);
  --modal-padding-x: var(--padding-x-box);
  background: transparent;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 1;
  inset: 0;
  transition: display var(--duration-md) var(--easing-base), opacity var(--duration-md) var(--easing-base);
  transition-behavior: allow-discrete;
  height: inherit;
}
@starting-style {
  .widget .modal {
    opacity: 0;
  }
}
.widget .modal-base,
.widget .modal article {
  background: var(--modal-background);
  backdrop-filter: var(--backdrop-filter-blur-lg);
  -webkit-backdrop-filter: var(--backdrop-filter-blur-lg);
  border-radius: var(--modal-border-radius) var(--modal-border-radius) 0 0;
  box-shadow: var(--box-shadow-z5);
  display: flex;
  flex-direction: column;
  margin: auto auto 0;
  padding: 0;
  overflow-y: auto;
  opacity: 1;
  overscroll-behavior-y: contain;
  position: fixed;
  inset: 0;
  transition: translate var(--duration-md) var(--easing-base), opacity var(--duration-md) var(--easing-base);
  translate: 0;
  width: min(100%, var(--width-lg));
  max-height: calc(100% - var(--size-5));
}
@starting-style {
  .widget .modal-base,
  .widget .modal article {
    translate: 0 50%;
  }
}
@media (pointer: coarse) {
  .widget .modal-base,
  .widget .modal article {
    scrollbar-gutter: stable both-edges;
  }
}
@media only screen and (min-width: 768px) and (min-height: 341px) {
  .widget .modal-base,
  .widget .modal article {
    border-radius: var(--modal-border-radius);
    border-top-width: var(--size-2);
    margin-bottom: auto;
    height: max-content;
    max-height: calc(100vh - var(--size-8));
  }
  @starting-style {
    .widget .modal-base,
    .widget .modal article {
      translate: 0 -50%;
    }
  }
}
.widget .modal:not([open]) .modal-base,
.widget .modal[open=false] .modal-base {
  translate: 0 50%;
}
@media only screen and (min-width: 768px) and (min-height: 341px) {
  .widget .modal:not([open]) .modal-base,
  .widget .modal[open=false] .modal-base {
    translate: 0 -50%;
  }
}
.widget .modal.is-sm {
  border-radius: var(--modal-border-radius);
  margin-bottom: auto;
  width: min(100vw - var(--size-4), var(--width-base));
}
@media only screen and (min-width: 768px) and (min-height: 341px) {
  .widget .modal.is-lg {
    width: var(--width-xl);
  }
}
.widget .modal:modal::backdrop {
  background-color: var(--color-background-scrim);
}
@supports not (selector(:modal)) {
  .widget .modal::backdrop {
    background-color: var(--color-background-scrim);
  }
}
.widget .modal-header {
  padding-block: var(--size-2p5) var(--size-1p5);
  padding-inline: var(--size-2p5);
}
.widget .modal-header > :is(h2, h3, h4) {
  color: var(--color-ink-inverse-base);
  font-size: var(--font-size-base);
  font-weight: 500;
}
@media only screen and (min-width: 768px) and (min-height: 341px) {
  .widget .modal-header {
    padding-block: var(--size-3) var(--size-2);
    padding-inline: var(--size-4);
  }
}
.widget .modal-body {
  padding-inline: var(--size-1p5);
}
@media only screen and (min-width: 768px) and (min-height: 341px) {
  .widget .modal-body {
    padding-inline: var(--size-2);
  }
}
.widget .modal-footer {
  display: flex;
  justify-content: space-between;
  padding-block: var(--size-1);
  padding-inline: var(--size-1p5);
}
@media only screen and (min-width: 768px) and (min-height: 341px) {
  .widget .modal-footer {
    padding-bottom: var(--size-2);
    padding-inline: var(--size-2);
  }
}
.widget .modal-footer .btn {
  --button-background: transparent;
  --button-color: var(--color-ink-inverse-base);
  --button-hover: var(--color-ink-inverse-border);
  --button-padding-x: var(--size-2);
}
.widget .modal-footer .btn.is-submit {
  --button-color: var(--color-brand-text-inverse);
}

/*# sourceMappingURL=modal.css.map */