@use "sass:map" as sassmap;
@use "../../../styles/tokens/breakpoint";
@use "../../../styles/tools/generate";
@use "../../../styles/tools/map";
@use "./config";

$section-spacing-colors: (
  background-primary,
  background-secondary,
  background-contrast,
  background-accent,
  background-accent1-blog,
  background-accent2-blog,
  background-none,
  surface-primary,
  surface-secondary,
  surface-tertiary,
  surface-subtle,
  surface-moderate,
  surface-contrast,
  surface-accent
);

@mixin base {
  background-color: var(--color-background-primary);
}

@mixin spacing($variant, $config: config.$spacing) {
  @include generate.responsive-css-map(sassmap.get($config, $variant));
}

@mixin spacing-rules($config: config.$spacing) {
  &:not([class*="background-"]):not([class*="surface-"])
    + &:not([class*="background-"]):not([class*="surface-"]) {
    &:not(.section--default) {
      @include spacing("small");
    }
  }

  @each $color in $section-spacing-colors {
    &[class~="#{$color}"] + &[class~="#{$color}"] {
      &:not(.section--default) {
        @include spacing("small");
      }
    }
  }
}

@mixin image-stuck-to-bottom($config: config.$stuck-image-spacing) {
  @each $breakpoint, $value in $config {
    @include breakpoint.get($breakpoint) {
      margin-bottom: $value;
    }
  }
}