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

.navds-modal {
  --__axc-modal-bg: var(--ax-bg-raised);

  background-color: var(--__axc-modal-bg);
  border: 1px solid var(--ax-border-subtleA);
  border-radius: var(--ax-border-radius-xlarge);
  box-shadow: var(--ax-shadow-dialog);
  padding: 0;
  position: fixed;
  max-height: 100%;
  max-width: 100%;
  color: var(--ax-text-default);

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

.navds-modal--polyfilled {
  top: 50%;
  transform: translate(0, -50%);

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

  &:not([open]) {
    display: none; /* from polyfill */
  }

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

._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--medium {
  width: 700px;
}

.navds-modal--small {
  width: 450px;

  & .navds-modal__header {
    padding: var(--ax-spacing-3) var(--ax-spacing-4);
  }

  & .navds-modal__body {
    padding: var(--ax-spacing-3) var(--ax-spacing-4);
  }

  & .navds-modal__footer {
    padding: var(--ax-spacing-3) var(--ax-spacing-4);
  }
}

@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 --ax-bg-overlay because ::backdrop does not inherit from anything but itself.
   * TODO: Consider adding `::backdrop` to global token definitions.
   * TODO: Check that overlay-color is correct after the new colors is set in stone.
   */
  background: #0214317d;
  animation: akselModalBackdropFadeIn 0.35s cubic-bezier(0.15, 1, 0.3, 1);
}

.navds-modal--polyfilled + .backdrop /* Cannot be combined with ::backdrop selector */ {
  background: #0214317d;

  /* 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(--ax-spacing-4);
  float: right;
}

.navds-modal__header {
  padding: var(--ax-spacing-4) var(--ax-spacing-5);
}

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

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

.navds-modal__body {
  padding: var(--ax-spacing-4) var(--ax-spacing-5);
  overflow: auto;
  overscroll-behavior: contain;
  position: relative; /* Needed to make sr-only elements position correctly - see Storybook */
  background:
    linear-gradient(var(--__axc-modal-bg) 30%, transparent) top,
    linear-gradient(transparent, var(--__axc-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__header + .navds-modal__body {
  padding-top: var(--ax-spacing-0);
}

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

.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(2% + 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;
  }
}
