@import "tools.mixins";

@mixin c-marketing-container-column-sm {
  border: none;
  background: none;
  padding: 0;
  @include display-grid;
  @include grid-template-columns(rem(10), auto 1fr);
  @include grid-template-rows(0, 1fr auto 1fr);

  // If no image is present
  .c-marketing-container--no-img {
    @include grid-template-columns(0, 1fr);

    .c-marketing-container__content {
      @include grid-column(1, 2);
      padding-left: rem(20);
    }
    .c-marketing-container__dismiss {
      @include grid-column(1, 2);
    }
  }

  .c-marketing-container__bg {
    display: block;
    border: 1px solid $color-stone-300;
    @include grid-row(2, 3);
    @include grid-column(1, 3, true);
  }

  .c-marketing-container__dismiss {
    position: relative;
    top: auto;
    right: auto;
    @include grid-column(2, 3, true);
    @include grid-row(2, 3);
    @include grid-align-self(start);
    @include grid-justify-self(end);
    margin-top: rem(1);
    margin-right: rem(1);
  }

  .c-marketing-container__image {
    float: none;
    margin: 0;
    padding: rem(10) 0 rem(10) rem(20);
    @include grid-align-self(start);
    @include grid-row(2, 3);
    @include grid-column(1, 2, true);
  }

  .c-marketing-container__image--portrait {
    padding: 0 0 0 rem(20);
    @include grid-align-self(center);
    @include grid-row(1, 4);
    @include grid-column(1, 2, true);
  }

  .c-marketing-container__content {
    padding: rem(10) rem(10) rem(10) 0;
    @include grid-row(2, 3);
    @include grid-column(2, 3, true);
    @include display-grid;
    @include grid-template-columns(0, 1fr);
    @include grid-template-rows(0, grid-repeat(3, auto) 1fr);
  }

  .c-marketing-container__label {
    @include grid-row(1, 2);
    @include grid-column(1, 2);
  }

  .c-marketing-container__headline {
    @include grid-row(2, 3);
    @include grid-column(1, 2);
  }

  .c-marketing-container__dek {
    @include grid-row(3, 4);
    @include grid-column(1, 2);
  }

  .c-marketing-container__cta {
    @include grid-row(4, 5);
    @include grid-column(1, 2);
    @include grid-template-columns(rem(10), auto);
    @include grid-template-rows(0, auto auto 1fr);
  }

  .c-marketing-container__cta .c-button {
    @include grid-row(2, 3);
    @include grid-column(1, 2, true);
    @include grid-align-self(start);
    @include grid-justify-self(start);
  }

  .c-marketing-container__sponsored-text {
    @include grid-row(1, 2);
    @include grid-column(2, 3, true);
    font-size: rem(10);
    line-height: line-height(10, 12);
    max-width: rem(170);
    margin: 0;
  }

  .c-marketing-container__sponsored-logo {
    @include grid-row(2, 3);
    @include grid-column(2, 3, true);
    .c-image {
      max-width: rem(170);
      margin: 0;
    }
  }
}

@mixin c-marketing-container-column-md {
  @include grid-template-columns(rem(10), auto 1fr);
  @include grid-template-rows(0, 1fr auto 1fr);

  // If no image is present
  .c-marketing-container--no-img {
    @include grid-template-columns(0, 1fr);

    .c-marketing-container__content {
      @include grid-column(1, 2);
      padding-left: rem(60);
    }
    .c-marketing-container__dismiss {
      @include grid-column(1, 2);
    }
  }

  .c-marketing-container__bg {
    @include grid-column(1, 3, true);
  }

  .c-marketing-container__image--portrait {
    @include grid-align-self(center);
    @include grid-row(1, 4);
    @include grid-column(1, 2, true);
  }

  .c-marketing-container__content {
    padding: rem(20) rem(10) rem(20) 0;
    @include grid-template-columns(rem(20), 1fr auto);
    @include grid-template-rows(0, auto auto 1fr);
  }

  .c-marketing-container__label {
    @include grid-row(1, 2);
    @include grid-column(1, 2, true);
  }

  .c-marketing-container__headline {
    font-size: rem(28);
    line-height: line-height(28, 30);
    @include grid-row(2, 3);
    @include grid-column(1, 2, true);
  }

  // Sans-serif font
  .c-marketing-container__headline--sans {
    font-size: rem(26);
    line-height: line-height(26, 24);
  }

  .c-marketing-container__dek {
    @include grid-row(3, 4);
    @include grid-column(1, 2, true);
  }

  .c-marketing-container__cta {
    @include grid-row(2, 4);
    @include grid-column(2, 3, true);
    @include grid-template-columns(0, 1fr);
    @include grid-template-rows(rem(10), auto auto 1fr);
  }

  .c-marketing-container__cta .c-button {
    @include grid-row(1, 2);
    @include grid-column(1, 2);
    @include grid-align-self(center);
    @include grid-justify-self(end);
  }

  .c-marketing-container__sponsored-text {
    @include grid-row(2, 3, true);
    @include grid-column(1, 2);
    margin: 0 auto;
  }

  .c-marketing-container__sponsored-logo {
    @include grid-row(3, 4, true);
    @include grid-column(1, 2);
    .c-image {
      margin: 0 auto;
    }
  }
}

@mixin c-marketing-container-full-sm {
  border: none;
  background: none;
  padding: 0;
  @include display-grid;
  @include grid-template-columns(rem(20), auto 1fr);
  @include grid-template-rows(0, 1fr auto 1fr);

  // If no image is present
  .c-marketing-container--no-img {
    @include grid-template-columns(0, 1fr);

    .c-marketing-container__content {
      @include grid-column(1, 2);
      padding-left: rem(20);
    }
    .c-marketing-container__dismiss {
      @include grid-column(1, 2);
    }
  }

  .c-marketing-container__bg {
    display: block;
    border: 1px solid $color-stone-300;
    @include grid-row(2, 3);
    @include grid-column(1, 3, true);
  }

  .c-marketing-container__dismiss {
    position: relative;
    top: auto;
    right: auto;
    @include grid-column(2, 3, true);
    @include grid-row(2, 3);
    @include grid-align-self(start);
    @include grid-justify-self(end);
    margin-top: rem(1);
    margin-right: rem(1);
  }

  .c-marketing-container__image {
    float: none;
    margin: 0;
    padding: rem(10) 0 rem(10) rem(20);
    @include grid-align-self(start);
    @include grid-row(2, 3);
    @include grid-column(1, 2, true);
  }

  .c-marketing-container__image--portrait {
    padding: 0 0 0 rem(20);
    @include grid-align-self(center);
    @include grid-row(1, 4);
    @include grid-column(1, 2, true);
  }

  .c-marketing-container__content {
    padding: rem(10) rem(20) rem(10) 0;
    @include grid-row(2, 3);
    @include grid-column(2, 3, true);
    @include display-grid;
    @include grid-template-columns(0, 1fr);
    @include grid-template-rows(0, grid-repeat(3, auto) 1fr);
  }

  .c-marketing-container__label {
    @include grid-row(1, 2);
    @include grid-column(1, 2);
  }

  .c-marketing-container__headline {
    @include grid-row(2, 3);
    @include grid-column(1, 2);
  }

  .c-marketing-container__dek {
    @include grid-row(3, 4);
    @include grid-column(1, 2);
  }

  .c-marketing-container__cta {
    @include grid-row(4, 5);
    @include grid-column(1, 2);
    @include grid-template-columns(rem(10), rem(180) 1fr);
    @include grid-template-rows(0, auto auto 1fr);
  }

  .c-marketing-container__cta .c-button {
    @include grid-row(2, 3);
    @include grid-column(1, 2, true);
    @include grid-align-self(start);
  }

  .c-marketing-container__sponsored-text {
    @include grid-row(1, 2);
    @include grid-column(2, 3, true);
    font-size: rem(10);
    line-height: line-height(10, 12);
    max-width: rem(170);
    margin: 0;
  }

  .c-marketing-container__sponsored-logo {
    @include grid-row(2, 3);
    @include grid-column(2, 3, true);
    .c-image {
      max-width: rem(170);
      margin: 0;
    }
  }
}

@mixin c-marketing-container-full-md {
  @include grid-template-columns(rem(20), auto 1fr);
  @include grid-template-rows(0, 1fr auto 1fr);

  // If no image is present
  .c-marketing-container--no-img {
    @include grid-template-columns(0, 1fr);

    .c-marketing-container__content {
      @include grid-column(1, 2);
      padding-left: rem(60);
    }
    .c-marketing-container__dismiss {
      @include grid-column(1, 2);
    }
  }

  .c-marketing-container__bg {
    @include grid-column(1, 3, true);
  }

  .c-marketing-container__image {
    padding-left: rem(60);
  }

  .c-marketing-container__image--portrait {
    @include grid-align-self(center);
    @include grid-row(1, 4);
    @include grid-column(1, 2, true);
  }

  .c-marketing-container__content {
    @include grid-template-columns(rem(20), 1fr rem(240));
    @include grid-template-rows(0, auto auto 1fr);
    padding-right: rem(60);
  }

  .c-marketing-container__label {
    @include grid-row(1, 2);
    @include grid-column(1, 2, true);
  }

  .c-marketing-container__headline {
    font-size: rem(28);
    line-height: line-height(28, 30);
    @include grid-row(2, 3);
    @include grid-column(1, 2, true);
  }

  // Sans-serif font
  .c-marketing-container__headline--sans {
    font-size: rem(26);
    line-height: line-height(26, 24);
  }

  .c-marketing-container__dek {
    @include grid-row(3, 4);
    @include grid-column(1, 2, true);
  }

  .c-marketing-container__cta {
    @include grid-row(2, 4);
    @include grid-column(2, 3, true);
    @include grid-template-columns(0, 1fr);
    @include grid-template-rows(rem(10), auto auto 1fr);
  }

  .c-marketing-container__cta .c-button {
    @include grid-row(1, 2, true);
    @include grid-column(1, 2);
  }

  .c-marketing-container__sponsored-text {
    @include grid-row(2, 3, true);
    @include grid-column(1, 2);
    margin: 0 auto;
  }

  .c-marketing-container__sponsored-logo {
    @include grid-row(3, 4, true);
    @include grid-column(1, 2);
    .c-image {
      margin: 0 auto;
    }
  }
}

@mixin c-marketing-container-full-lg {
  @include grid-template-columns(rem(30), auto 1fr);

  // If no image is present
  .c-marketing-container--no-img {
    @include grid-template-columns(0, 1fr);

    .c-marketing-container__content {
      padding-left: rem(140);
    }
  }

  .c-marketing-container__image {
    padding-left: rem(140);
  }
  .c-marketing-container__content {
    @include grid-template-columns(rem(30), 1fr rem(240));
    padding-right: rem(140);
  }
}

// Image size breakpoints
@mixin c-marketing-container-image-62 {
  .c-marketing-container__image {
    .c-image {
      max-width: rem(62);
    }
  }
}

@mixin c-marketing-container-image-portrait-82 {
  .c-marketing-container__image {
    .c-image {
      max-width: rem(82);
    }
  }
}

@mixin c-marketing-container-image-150 {
  .c-marketing-container__image {
    .c-image {
      max-width: rem(150);
    }
  }
}

@mixin c-marketing-container-image-160 {
  .c-marketing-container__image {
    .c-image {
      max-width: rem(160);
    }
  }
}

@mixin c-marketing-container-image-portrait-170 {
  .c-marketing-container__image--portrait {
    .c-image {
      max-width: rem(170);
      padding-left: 0;
    }
  }
}

@mixin c-marketing-container-image-portrait-190 {
  .c-marketing-container__image--portrait {
    .c-image {
      max-width: rem(190);
    }
  }
}

@mixin c-marketing-container-image-200 {
  .c-marketing-container__image {
    .c-image {
      max-width: rem(200);
    }
  }
}
