:host,
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
    :host,
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }:host,
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
    :host,
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }/** Typography */
:host {
  /**
   * @prop --border-radius: border radius of the dialog. Defaults to 0.
   * @prop --content-background: background color of the dialog content. Defaults to var(--nano-color-neutral-75).
   * @prop --content-color: text color of the dialog content. Defaults to var(--nano-color-neutral-1000).
   * @prop --footer-content: background color of the dialog footer. Defaults to var(--nano-color-neutral-75).
   * @prop --scrim-color: color of the dialog scrim. Defaults to var(--nano-overlay-background-color).
   * @prop --box-shadow: box shadow of the dialog. Defaults to var(--nano-shadow-l3).
   * @prop --close-button-color: color of the close button. Defaults to var(--nano-color-primary-1200).
   * @prop --width: width of the dialog. Defaults to 60rem.
   * @prop --height: height of the dialog. Defaults to auto.
   * @prop --body-padding-v: vertical padding of the dialog body. Defaults to var(--nano-spacing-l1-default).
   * @prop --body-padding-h: horizontal padding of the dialog body. Defaults to var(--nano-spacing-l1-default).
   * @prop --header-padding-v: vertical padding of the dialog header. Defaults to var(--nano-spacing-l).
   * @prop --header-padding-h: horizontal padding of the dialog header. Defaults to var(--nano-spacing-l1-default).
   * @prop --footer-padding-v: vertical padding of the dialog footer. Defaults to var(--nano-spacing-l).
   * @prop --footer-padding-h: horizontal padding of the dialog footer. Defaults to var(--nano-spacing-l1-default)
   */
  --border-radius: 0;
  --content-background: var(--nano-color-surface-300);
  --content-color: var(--nano-color-base-1000);
  --footer-content: var(--nano-color-neutral-75);
  --scrim-color: var(--nano-overlay-background-color);
  --box-shadow: var(--nano-shadow-l3);
  --close-button-color: var(--nano-color-primary-1200);
  --width: 50rem;
  --height: auto;
  --body-padding-v: var(--nano-spacing-l1-default);
  --body-padding-h: var(--nano-spacing-l1-default);
  --header-padding-v: var(--nano-spacing-l);
  --header-padding-h: var(--nano-spacing-l1-default);
  --footer-padding-v: var(--nano-spacing-l);
  --footer-padding-h: var(--nano-spacing-l1-default);
}

.dialog {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  z-index: var(--nano-z-index-modal);
  border: none;
  inline-size: unset;
  block-size: unset;
  color: var(--content-color);
  background-color: unset;
}
.dialog::backdrop {
  display: none;
}

.dialog__panel {
  display: flex;
  flex-direction: column;
  z-index: 2;
  inline-size: var(--width);
  block-size: var(--height);
  max-inline-size: calc(100% - (var(--nano-spacing-xl) + var(--nano-scroll-lock-size)));
  max-block-size: calc(92vh - var(--nano-spacing-xl));
  background-color: var(--content-background);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  opacity: 0;
  transform: scale(0.8);
  transition: var(--nano-transition-fast) opacity, var(--nano-transition-fast) transform;
}
.dialog__panel:focus {
  outline: none;
}
.dialog--open .dialog__panel {
  display: flex;
  opacity: 1;
  transform: none;
}
.dialog--nodismiss .dialog__panel {
  animation: cannotClose 0.25s ease-in-out 1;
}
@keyframes cannotClose {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

.dialog__header {
  flex: 0 0 auto;
  display: flex;
  inline-size: 100%;
  background-color: var(--content-background);
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  transition: var(--nano-transition-x-fast) box-shadow;
  min-inline-size: auto;
  padding-block: var(--header-padding-v);
  padding-inline: var(--header-padding-h);
}
[stuck] .dialog__header {
  box-shadow: var(--nano-shadow-l0);
}

.dialog__title {
  flex: 1 1 auto;
  font-weight: var(--nano-font-weight-normal);
  font-size: var(--nano-font-size-xl);
  line-height: var(--nano-line-height-denser);
  text-wrap: balance;
}

.dialog__close-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  font-size: 1.375rem;
  position: relative;
  inset-inline-end: calc(var(--nano-spacing-l1-default) / 2 * -1);
  --color: var(--close-button-color);
}

.dialog__body-wrap {
  flex: 1 1 auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--border-radius);
}
.dialog:not(.dialog--has-header) .dialog__body-wrap {
  border-start-start-radius: 0;
  border-start-end-radius: 0;
  border-end-start-radius: inherit;
  border-end-end-radius: inherit;
}
.dialog:not(.dialog--has-footer) .dialog__body-wrap {
  border-start-start-radius: inherit;
  border-start-end-radius: inherit;
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}

.dialog__body {
  padding-block: 0 var(--body-padding-v);
  padding-inline: var(--body-padding-h);
}
.dialog:not(.dialog--has-header) .dialog__body {
  padding-block-start: var(--body-padding-v);
}
.dialog__body ::slotted(*) {
  max-inline-size: 100%;
}

.dialog__footer {
  inline-size: 100%;
  padding-block: var(--footer-padding-v);
  padding-inline: var(--footer-padding-h);
  background: var(--footer-content);
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  position: relative;
  inset-block-start: 1px;
  min-inline-size: auto;
  border-block-start: 1px solid var(--nano-color-neutral-300);
  gap: var(--nano-spacing-md);
  display: inline-flex;
}
.dialog:not(.dialog--has-footer) .dialog__footer {
  display: none;
}

.dialog__overlay {
  position: fixed;
  inset: 0 !important;
  background-color: var(--scrim-color);
  opacity: 0;
  transition: var(--nano-transition-fast) opacity;
}
.dialog--open .dialog__overlay {
  opacity: 1;
}