/// ----------------------------------------------------------------------------
/// Dependencies
/// ----------------------------------------------------------------------------

@import "../../../sass/webpack_deps";

/// ----------------------------------------------------------------------------
/// Base styles
/// ----------------------------------------------------------------------------

.ad {
  background-color: $darkgray;
}

/// ----------------------------------------------------------------------------
/// Extended styles
/// ----------------------------------------------------------------------------

.ad--mpu {
  height: 25rem;
  width: 30rem;

  &.ad--article {
    @media (max-width: $max-600) {
      display: none !important;
    }

    @media (min-width: $min-600) {
      margin-left: auto;
      margin-right: auto;
      margin-top: 7.7rem;
    }

    @media (min-width: $min-1350) {
      position: absolute;
      right: 0;
      top: auto;
    }
  }
}

.ad--inline {
  background-color: $adunit-background-color;

  &::before {
    background-color: $color-white;
    border-top: 1px solid $adunit-background-color;
    color: rgba($darkgray, .57);
    content: "Advertisement";
    display: block;
    font-size: 8px;
    left: 0;
    letter-spacing: .5px;
    line-height: 1;
    padding-bottom: 16px;
    padding-top: 10px;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
  }
}

.ad--inline__container,
.ad--leaderboard__container {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.adunit--sponsor-logo,
.adunit--sponsor-logo-masthead,
.adunit--best-in-masthead {
  display: inline-block;
}

.adunit--articles-inline iframe {
  // Target responsive ads
  width: 100%;

  // Target fixed-width ads
  &[width="300"],
  &[width="320"] {
    @media (min-width: $min-360) {
      margin: 24px auto;
      width: auto;
    }
  }
}

/// ----------------------------------------------------------------------------
/// Implementation detail
/// ----------------------------------------------------------------------------

.ad--article .adunit {
  padding-bottom: 1.8rem;
  padding-top: 1.8rem;
}

.ad--article .adunit--leaderboard {
  display: inline-block;
  margin-bottom: -8px; // offset `inline-block`
  padding-bottom: 1.8rem;
  padding-top: 1.8rem;
}

.attribution .adunit,
.love-letter__author .adunit,
.article__attribution .adunit {
  @media (max-width: $max-720) {
    display: block;
    margin-left: auto;
    margin-right: auto;
    transform: scale(.8);
    width: 15rem;
  }

  @media (min-width: $min-720) {
    margin-left: ($gutter * 2);
    padding-left: ($gutter * 2);
    position: relative;
  }

  // Create a fake border so that it can extend outside of the ad
  &::before {
    @media (min-width: $min-720) {
      background-color: $color-gray;
      content: "";
      display: block;
      height: calc(100% + 6rem);
      left: 0;
      position: absolute;
      top: -3rem;
      width: .1rem;
    }
  }
}

.masthead__ad .adunit--sponsor-logo-masthead {
  bottom: 0;
  position: absolute;
  right: 12px;
}

.masthead__ad .adunit--best-in-masthead {
  margin-top: 2.4rem;
}

.adunit--experiences {
  padding-bottom: 10rem;
}

.adunit--hero {
  background-color: $adunit-background-color;
  padding-bottom: .3rem;
  text-align: center;
}

.adunit--bottom,
.adunit--promotion,
.adunit--experiences {
  // Please Dear God stay in the center
  display: block;
  margin: 0 auto;
  text-align: center;
}