.navds-modal__document-body {
  overflow: hidden;
}

.navds-modal {
  --__ac-modal-bg: var(--ac-modal-bg, var(--a-surface-default));

  background-color: var(--__ac-modal-bg);
  border: none;
  border-radius: var(--a-border-radius-large);
  box-shadow: var(--a-shadow-xlarge);
  padding: 0;
  position: fixed;
  max-height: 100%;
  max-width: 100%;
  color: var(--a-text-default);

  /* In case Modal is opened with `show()`, in eg. Vergic screensharing */
  inset: 0;
  z-index: 9999;
}

.navds-modal[open] {
  display: flex;
  flex-direction: column;
  animation: akselModalFadeIn 0.35s cubic-bezier(0.15, 1, 0.3, 1);
}

.navds-modal--polyfilled {
  top: 50%;
  bottom: unset; /* Overrides inset: 0 from .navds-modal */
  transform: translate(0, -50%);

  /* From polyfill (dialog-polyfill/dist/dialog-polyfill.css): */
  left: 0;
  right: 0;
  width: fit-content;
  height: fit-content;
  margin: auto;
}

.navds-modal--polyfilled .navds-modal--polyfilled {
  overflow: auto;
}

.navds-modal--polyfilled:not([open]) {
  display: none; /* from polyfill */
}

._dialog_overlay {
  /* From polyfill */
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
  left: 0;
}

.navds-modal--small {
  width: var(--ac-modal-width-small, 450px);
}

.navds-modal--medium {
  width: var(--ac-modal-width-medium, 700px);
}

@media (min-width: 480px) {
  .navds-modal {
    max-width: calc(100% - 2em);
  }

  .navds-modal--autowidth {
    max-width: min(700px, calc(100% - 2em));
  }
}

@media (min-height: 480px) {
  .navds-modal {
    max-height: calc(100% - 2em);
  }

  .navds-modal--top {
    margin-top: 2em;
    max-height: calc(100% - 4em);
  }
}

.navds-modal::backdrop {
  /*
   * Cannot use --a-surface-backdrop because ::backdrop does not inherit from anything but itself.
   * But consumers can do `::backdrop { --ac-modal-backdrop: white; }`
   * We can add ::backdrop to tokens.css when we remove the polyfill.
   */
  background: var(--ac-modal-backdrop, rgb(2 20 49 / 0.49));
  animation: akselModalBackdropFadeIn 0.35s cubic-bezier(0.15, 1, 0.3, 1);
}

.navds-modal--polyfilled + .backdrop /* Cannot be combined with ::backdrop selector */ {
  background: var(--ac-modal-backdrop, rgb(2 20 49 / 0.49));

  /* From polyfill: */
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
  left: 0;
}

.navds-modal__button {
  margin-left: var(--a-spacing-4);
  float: right;
}

.navds-modal__header {
  padding: var(--a-spacing-6) var(--a-spacing-6) var(--a-spacing-4) var(--a-spacing-6);
}

.navds-modal--small .navds-modal__header {
  padding: var(--a-spacing-4) var(--a-spacing-4) var(--a-spacing-3) var(--a-spacing-4);
}

.navds-modal__header-icon svg {
  display: inline;
  vertical-align: -0.25rem;
  margin-right: var(--a-spacing-1);
}

.navds-modal__label {
  font-weight: 600;
  color: var(--a-text-subtle);
}

.navds-modal__body {
  padding: var(--a-spacing-6);
  overflow: auto;
  overscroll-behavior: contain;
  position: relative; /* Needed to make sr-only elements position correctly - see Storybook */
}

.navds-modal:not(.navds-modal--polyfilled) .navds-modal__body {
  background:
    linear-gradient(var(--__ac-modal-bg) 30%, transparent) top,
    linear-gradient(transparent, var(--__ac-modal-bg) 60%) bottom,
    radial-gradient(farthest-side at 50% 0, rgba(0 0 0 / 0.3), transparent) top,
    radial-gradient(farthest-side at 50% 100%, rgba(0 0 0 / 0.3), transparent) bottom;
  background-size:
    100% 40px,
    100% 50px,
    100% 16px,
    100% 16px;
  background-attachment: local, local, scroll, scroll;
  background-repeat: no-repeat;
}

.navds-modal--small .navds-modal__body {
  padding: var(--a-spacing-2) var(--a-spacing-4) var(--a-spacing-4);
}

.navds-modal__header + .navds-modal__body {
  padding-top: var(--a-spacing-0);
}

.navds-modal__footer {
  display: flex;
  flex-flow: row-reverse wrap;
  gap: var(--a-spacing-4);
  padding: var(--a-spacing-4) var(--a-spacing-6) var(--a-spacing-6) var(--a-spacing-6);
}

.navds-modal--small .navds-modal__footer {
  padding: var(--a-spacing-4);
}

.navds-modal__footer :nth-of-type(2) {
  margin-left: auto;
}

/* When Datepicker is used nested inside a Modal */
.navds-modal--polyfilled .navds-modal--polyfilled.navds-date__nested-modal {
  min-width: fit-content;
  max-width: 100vw;
  max-height: 100vh;
  animation: none;
}

@keyframes akselModalFadeIn {
  0% {
    opacity: 0.0001; /* Safari will not set focus inside the modal when it opens if we set this to 0 */
    transform: translate3d(0, calc(5% + 4px), 0);
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: none;
  }
}

@keyframes akselModalBackdropFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (forced-colors: active) {
  .navds-modal {
    outline: 2px solid transparent;
  }
}
