@use "../../../styles/tokens/breakpoint";
@use "../../../styles/tokens/space";
@use "./config";

@mixin layout(
  $spacing: config.$spacing,
  $button-selector: ".btn",
  $link-selector: ".link"
) {
  display: flex;
  flex-flow: row wrap;
  gap: $spacing;
  margin: 0 0 space.get("large") 0;

  #{$button-selector},
  #{$link-selector},
  button#{$link-selector} {
    margin: 0;
  }
}

@mixin stack-on-xs($spacing: config.$spacing, $button-selector: ".btn") {
  @include breakpoint.get("xs", "down") {
    flex-flow: column;
    gap: $spacing;
    max-width: 100%;
    margin: 0 0 $spacing 0;

    #{$button-selector},
    button.link {
      margin: 0;
    }
  }
}