@use 'sass:map';
@use '../../scss/spacers' as spacers;
@use '../../scss/palette' as palette;
@use '../../scss/font-settings' as font-settings;
@use '../../scss/breakpoints' as breakpoints;
@use '../../scss/screen-reader' as *;

.validation {
  &__error-wrapper {
    margin-bottom: spacers.getSpacer(2xs);

    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
      margin-bottom: spacers.getSpacer(m);
    }
  }

  &__summary {
    color: palette.$cherry600;

    &--visible {
      margin: spacers.getSpacer(l) 0 spacers.getSpacer(s);
    }

    &--sr-only {
      @include sr-only;
    }
  }

  &__errors {
    font-size: font-settings.$font-size-sm;
    font-weight: 600;

    &--visible {
      margin: spacers.getSpacer(l) 0 spacers.getSpacer(s);
    }
  }
}