.navds-error-summary {
  background-color: var(--ax-bg-default);
  padding: var(--ax-spacing-4) var(--ax-spacing-5);
  border: 4px solid var(--ax-border-danger);
  border-radius: var(--ax-border-radius-xlarge);
  outline-offset: 2px;

  &:focus-visible,
  &:has(.navds-error-summary__heading:focus-visible) {
    outline: 2px solid var(--ax-border-focus);
  }
}

@supports not selector(:focus-visible) {
  .navds-error-summary:focus {
    outline: 2px solid var(--ax-border-focus);
  }
}

.navds-error-summary--small {
  padding: var(--ax-spacing-3) var(--ax-spacing-4);

  & .navds-error-summary__heading {
    scroll-margin-top: var(--ax-spacing-4);
  }

  & > .navds-error-summary__list {
    margin: var(--ax-spacing-2) 0;
    gap: var(--ax-spacing-2);
    padding-left: var(--ax-spacing-5);
  }
}

.navds-error-summary__heading {
  scroll-margin-top: var(--ax-spacing-6);

  &:focus {
    outline: none;
  }
}

.navds-error-summary__list {
  margin: var(--ax-spacing-3) 0;
  display: flex;
  flex-direction: column;
  gap: var(--ax-spacing-3);
  padding-left: var(--ax-spacing-6);
  list-style: inherit;
}
