@use "design-system/helpers/invisible";

@use "design-system/palette";
@use "design-system/typography";

@mixin sprocket-error-summary {
  background-color: palette.$white;
  border: 0.25rem solid palette.$error-standard;
  display: block;
  padding: 1rem;
  line-height: 2rem;

  & > h2:first-child /* stylelint-disable-line nesting-selector-no-missing-scoping-root */ {
    margin-top: 0;
  }

  ul {
    margin-bottom: 0;
    padding: 0;
    list-style-type: none;
  }

  li {
    @include typography.error-standard;

    & /* stylelint-disable-line no-duplicate-selectors */ {
      display: block;
      padding: 0;
      margin: 0 0 0.25rem 0;
    }
  }

  a {
    @include typography.error-standard;

    &:focus {
      outline: 3px solid transparent;
      text-decoration: none;
      outline-offset: 0;
      box-shadow:
        0 -2px palette.$outline,
        0 4px palette.$black;
      color: palette.$standard;
      background-color: palette.$outline;
    }
  }

  &:focus /* stylelint-disable-line nesting-selector-no-missing-scoping-root */ {
    outline: 3px solid palette.$outline;
    outline-offset: 0;
    border-color: palette.$black;
  }
}

%sprocket-error-summary {
  @include sprocket-error-summary;
}