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

@layer components {
  .promo-banner {
    .grid {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

    &__item {
      @include mixins.promo-banner-item;
    }

    &--flush-top-sm-down {
      .promo-banner__item {
        @include mixins.promo-banner-item-no-top-padding-sm-down;
      }
    }

    &--flush-bottom-sm-down {
      .promo-banner__item {
        @include mixins.promo-banner-item-no-bottom-padding-sm-down;
      }
    }

    &--vertical {
      @include mixins.promo-banner-vertical;

      &.promo-banner--with-top-padding {
        @include mixins.promo-banner-vertical-with-top-padding;
      }

      .promo-banner__item[class*="grid__col"],
      .promo-banner__image[class*="grid__col"]:not(
          .promo-banner__image--bleed-right
        ) {
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
    }

    &--reverse {
      @include breakpoint.get("md") {
        .promo-banner__item[class*="grid__col"] {
          padding-left: space.get("medium") !important;
          padding-right: 0 !important;
        }

        .promo-banner__image[class*="grid__col"] {
          padding-left: 0 !important;
          padding-right: space.get("medium") !important;
        }
      }
    }

    &__image {
      @include mixins.promo-banner-image;

      &--bleed-right {
        @include mixins.promo-banner-image-bleed-right;
      }

      &--bleed-sm-down {
        @include mixins.promo-banner-image-bleed-sm-down;
      }
    }
  }
}