@import '@helsenorge/designsystem-react/scss/spacers';
@import '@helsenorge/designsystem-react/scss/breakpoints';
@import '@helsenorge/designsystem-react/scss/palette';

.mol_validation-summary {
  background-color: $cherry100;
  border-left: 4px solid $cherry600;
  padding: 1rem;

  @media (min-width: map-get($grid-breakpoints, md)) {
    padding: 2rem 4rem;
  }

  &__list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    max-width: map-get($container-max-widths, lg);
  }

  &__header {
    margin-bottom: 1.5rem;
    font-weight: 400;
    font-size: 1.375rem;
    margin-top: 0;
  }

  .mol_validation-summary__listitem:not(:first-child) {
    margin-top: 1rem;
  }

  .mol_validation-summary__link {
    color: $cherry600;
    font-size: 1.125rem;
    font-weight: 400;
  }
}