@use 'sass:map';
@use '../../scss/spacers' as spacers;
@use '../../scss/breakpoints' as breakpoints;
@use '../../scss/font-mixins' as fonts;

.error-wrapper {
  &--with-error {
    padding: spacers.getSpacer(s) spacers.getSpacer(xs) spacers.getSpacer(m) spacers.getSpacer(2xs);
    background-color: var(--color-notification-background-error);
    border: 1px solid var(--core-color-cherry-400);
    border-left: 4px solid var(--color-notification-border-error);

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

  &__errors {
    margin-top: 0;
    color: var(--color-notification-border-error);

    @include fonts.label;
  }
}