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

.stepbuttons {
  margin-top: spacers.getSpacer(m);
  margin-bottom: spacers.getSpacer(s);
  display: flex;
  flex-wrap: wrap;
  gap: spacers.getSpacer(m) spacers.getSpacer(l);

  &--has-sticky-buttons {
    background-color: palette.$white;
    position: sticky;
    bottom: 0;
  }

  &__buttons {
    display: flex;
    gap: spacers.getSpacer(s);

    @media (max-width: map.get(breakpoints.$grid-max-breakpoints, xs)) {
      width: 100%;
    }

    &--additional {
      flex-wrap: wrap;
    }
  }

  &__button {
    &--back,
    &--forward {
      @media (max-width: map.get(breakpoints.$grid-max-breakpoints, xs)) {
        width: 50%;
      }
    }
  }
}