@import "settings.colors";
@import "settings.fonts";

@import "mixins/settings.fonts";
@import "mixins/tools.mixins";
@import "mixins/components.button";

// Maps
// Theme Map
$theme-map: (
  stone: (
    light: $color-stone-200
  ),
  gold: (
    light: $color-gold-100,
    dark: $color-gold-900
  ),
  rust: (
    light: $color-rust-100,
    dark: $color-rust-900
  ),
  merlot: (
    light: $color-merlot-100,
    dark: $color-merlot-900
  ),
  salmon: (
    light: $color-salmon-100,
    dark: $color-salmon-900
  ),
  olive: (
    light: $color-olive-100,
    dark: $color-olive-900
  ),
  teal: (
    light: $color-teal-100,
    dark: $color-teal-900
  ),
  canpro: (
    light: $color-canpro-50,
    dark: $color-canpro-500
  )
);

// Label style map
$label-map: (
  grey: (
    background: $color-stone-200
  ),
  gold: (
    background: $color-gold-900,
    color: $color-white
  ),
  white: (
    background: $color-white
  ),
  white-red: (
    background: $color-white,
    color: $color-red-500
  ),
  white-gold: (
    background: $color-white,
    color: $color-gold-900
  ),
  canpro: (
    background: $color-white,
    color: $color-canpro-500
  )
);

.c-marketing-container {
  border: 1px solid $color-stone-300;
  background-color: $color-white;
  padding: rem(10);
  position: relative;
}

.c-marketing-container__bg {
  z-index: 1;
  background-color: $color-white;
}

@each $key, $value in $theme-map {
  .c-marketing-container--#{$key} {
    background-color: map-get($value, light);
    .c-marketing-container__bg {
      background-color: map-get($value, light);
    }
    @if map-get($value, dark) {
      // Headline
      .c-marketing-container__headline {
        color: map-get($value, dark);
      }

      // Dek
      .c-marketing-container__dek {
        a {
          &:hover {
            color: map-get($value, dark);
            border-bottom: 1px solid map-get($value, dark);
          }
        }
      }

      // Buttons
      .c-marketing-container__cta {
        .c-button {
          @include c-button-theme("#{$key}");
        }
      }
    }
  }
}

.c-marketing-container__dismiss {
  position: absolute;
  top: 0;
  right: 0;
  background-color: rgba(255, 255, 255, .8);
  z-index: 10;
}

.c-marketing-container__image {
  float: right;
  margin: 0 0 rem(10) rem(10);
  z-index: 9;
  line-height: 0;

  .c-image {
    max-width: rem(90);
  }
}

.c-marketing-container__content {
  z-index: 9;
}

// Label Styles
.c-marketing-container__label-content {
  @include font-gm-sans-bold;
  font-size: rem(12);
  letter-spacing: rem(1);
  line-height: 1;
  color: $color-grey-900;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: rem(10);
  padding: 0;

  // Muted
  &.c-marketing-container__label-content--muted {
    @include font-gm-sans;
  }
  // Label Themes
  @each $key, $value in $label-map {
    &.c-marketing-container__label-content--#{$key} {
      background: map-get($value, background);
      @if color {
        color: map-get($value, color);
      }
      padding: rem(4) rem(7);
    }
  }
}

// Heading Styles
.c-marketing-container__headline {
  @include font-pratt-bold;
  font-size: rem(21);
  line-height: line-height(21, 23);
  letter-spacing: 0;
  color: $color-grey-900;
  padding-bottom: rem(10);
}

// Sans-serif font
.c-marketing-container__headline--sans {
  @include font-gm-sans-bold;
  text-transform: uppercase;
  letter-spacing: rem(1);
  font-size: rem(19);
  line-height: line-height(19, 18);
}

// Dark headline override
.c-marketing-container .c-marketing-container__headline--dark {
  color: $color-grey-900;
}

// Dek styling
.c-marketing-container__dek {
  @include font-gm-sans;
  font-size: rem(14);
  line-height: line-height(14, 18);
  letter-spacing: rem(0.3);
  color: $color-grey-900;
  padding-bottom: rem(10);

  a {
    text-decoration: none;
    color: $color-grey-900;
    border-bottom: 1px solid $color-grey-900;

    &:visited {
      color: $color-grey-660;
      border-bottom: 1px solid $color-grey-660;
    }
    &:hover {
      color: $color-red-500;
      border-bottom: 1px solid $color-red-500;
    }
    &:focus,
    &:active {
      color: $color-grey-500;
      border-bottom: 1px solid $color-grey-500;
    }
  }
}

.c-marketing-container__dek--lg {
  font-size: rem(16);
  line-height: rem(20);
}

.c-marketing-container__cta {
  clear: both;
  @include display-grid;
  @include grid-template-columns(0, 1fr);
  @include grid-template-rows(rem(10), auto auto 1fr);
}

// Button overrides
.c-marketing-container__cta .c-button {
  @include grid-row(1, 2, true);
  @include grid-column(1, 2);
  .c-button__icon {
    fill: $color-grey-660;
  }
}
.c-marketing-container .c-marketing-container__cta--light .c-button {
  @include c-button-theme("white-primary");
}
.c-marketing-container .c-marketing-container__cta--dark .c-button {
  @include c-button-theme("grey-primary");
}
.c-marketing-container .c-marketing-container__cta--red .c-button {
  @include c-button-theme("utility-red-primary");
}

.c-marketing-container__sponsored-text {
  @include grid-row(2, 3, true);
  @include grid-column(1, 2);
  max-width: rem(150);
  margin: 0 auto;
  font-family: $font-sans-stack;
  font-size: rem(8);
  line-height: line-height(8, 12);
  letter-spacing: rem(1);
  color: $color-grey-660;
  text-transform: uppercase;
  text-align: center;
  display: block;
}

.c-marketing-container__sponsored-logo {
  @include grid-row(3, 4, true);
  @include grid-column(1, 2);
  text-align: center;
  .c-image {
    display: block;
    margin: 0 auto;
    max-width: rem(150);
  }
}
