@use "sass:map" as sassmap;
@use "./../../../styles/tools/generate";
@use "./../../../styles/tokens/breakpoint";
@use "./../../../styles/tokens/space";
@use "./../../Section/styles/mixins" as section;

@mixin promo-banner-item() {
  order: 2;
  padding-top: space.get("xlarge");
  padding-bottom: space.get("xlarge");

  @include breakpoint.get("md", "down") {
    padding-top: space.get("large");
    padding-bottom: space.get("large");
  }

  &[class*="grid__col"] {
    @include breakpoint.get("sm", "down") {
      padding-right: 0 !important;
    }

    padding-left: 0 !important;
  }

  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;

  > * {
    width: fit-content;
  }
}

@mixin promo-banner-item-no-top-padding-sm-down() {
  @include breakpoint.get("sm", "down") {
    padding-top: 0;
  }
}

@mixin promo-banner-item-no-bottom-padding-sm-down() {
  @include breakpoint.get("sm", "down") {
    padding-bottom: 0;
  }
}

@mixin promo-banner-image() {
  order: 2;
  text-align: end;
  align-self: center;

  @include breakpoint.get("md", "down") {
    text-align: center;
    padding-top: 0;
    padding-bottom: 0;
  }

  &[class*="grid__col"] {
    @include breakpoint.get("sm", "down") {
      padding-left: 0 !important;
    }

    padding-right: 0 !important;
  }
}

@mixin promo-banner-image-bleed-right() {
  @include breakpoint.get("sm", "down") {
    order: 1;
  }

  > * {
    // Extend image to the right edge of viewport even when inside .container
    transform: translateX(calc(50vw - 100% + -20px));

    @include breakpoint.get("sm", "down") {
      transform: translate(10px);
    }
  }
}
