.off-canvas__close-container {
  display: flex;
  justify-content: end;
}

.header__off-canvas-toggle {
  padding: var(--anrt-font-size-100);
  cursor: pointer;
  color: var(--header-color);
  border: 0;
  background: transparent;
  font-size: var(--anrt-font-size-100);
  font-weight: 500;

  :where(.page--off-white) & {
    color: var(--anrt-color-text);
  }
}

.header__off-canvas-toggle:focus,
.header__off-canvas-toggle:hover {
  color: var(--anrt-color-secondary);
}

.nav-mobile {
  --off-canvas-dialog-offset: var(--drupal-displace-offset-top, 0px);

  max-width: 100vw;
}

.nav-mobile .sl-dialog__content {
  top: var(--off-canvas-dialog-offset);
  display: flex;
  flex-direction: column;
  gap: var(--anrt-font-size-250);
  width: 100%;
  height: calc(100vh - var(--off-canvas-dialog-offset));
  padding: var(--anrt-spacing-075) var(--anrt-spacing-100);
  background: var(--anrt-background-gradient-blue);
  margin-block: 0;
  margin-inline: 0;
}

.nav-mobile .sl-dialog__close-button {
  align-self: end;
}

@media (prefers-reduced-motion: no-preference) {
  .nav-mobile {
    --off-canvas-dialog-overlay-duration: 200ms;
    --off-canvas-dialog-content-duration: 400ms;
  }
  .sl-dialog .sl-dialog__overlay {
    animation: fade-in var(--off-canvas-dialog-content-duration) var(--off-canvas-dialog-overlay-duration) both paused;
  }
  .sl-dialog .sl-dialog__content {
    animation: slide-in var(--off-canvas-dialog-content-duration) var(--off-canvas-dialog-overlay-duration) both paused;
  }
  .sl-dialog:not([aria-hidden]) .sl-dialog__overlay,
  .sl-dialog:not([aria-hidden]) .sl-dialog__content {
    animation-play-state: running;
  }
  @keyframes fade-in {
    from {
      opacity: 0;
    }
  }
  @keyframes slide-in {
    from {
      transform: translateX(-100%);
    }
  }
}