@use "sass:map" as sassmap;
@use "./../../../styles/tools/generate";
@use "./../../../styles/tools/layout";
@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;
  @include layout.reset-last-child-margin-bottom;

  > * {
    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;

  // Page-builder output may wrap image content in a div.
  > :not(img):not(picture):not(svg) {
    width: 100%;
  }

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

    padding-right: 0 !important;
  }

  > * {
    @include breakpoint.get("sm", "down") {
      width: 100%;
    }
  }
}

@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);
    }
  }
}

@mixin promo-banner-image-bleed-sm-down() {
  @include breakpoint.get("sm", "down") {
    > * {
      width: calc(100% + (2 * #{space.get("small")}));
      max-width: none;
      margin-left: calc(-1 * #{space.get("small")});
    }
  }
}

@mixin promo-banner-vertical() {
  .promo-banner__item {
    padding-top: 0 !important;
  }
}

@mixin promo-banner-vertical-with-top-padding() {
  .promo-banner__item {
    padding-top: space.get("xlarge") !important;

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