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

@import "mixins/components.adv.scss";
@import "mixins/settings.fonts";
@import "mixins/tools.mixins";

.c-ad {
  padding: 0;
  background-color: transparent;
}

.c-ad--inline {
  padding: rem(10) 0;
  background-color: $color-grey-50;
  clear: both;
}

@include mq($from: mobileWide) {
  .c-ad--inline {
    padding: 0;
    text-align: center;
    background-color: transparent;
    .c-ad__wrapper {
      display: inline-block;
      padding: rem(10) rem(15);
      background-color: $color-grey-50;
    }
  }
}

// slimecut video ad
.c-ad--slimcut {
  margin-left: auto;
  margin-right: auto;
  padding: rem(10) 0;
  text-align: center;
  background-color: $color-grey-50;
  clear: both;
  .c-ad__wrapper {
    display: inline-block;
    height: 337px; // - 22px (c-ad__message height) = 315px
    width: 560px;
  }
}

.c-ad__message {
  @include adv-font;
  margin: 0 0 rem(10) 0;
  padding: 0 rem(10);
  text-align: center;
  color: $color-grey-660;
}

.c-ad__image {
  text-align: center;
}

.c-ad-choices {
  width: 100%;
  height: rem(40);
  margin: 0 0 rem(10) 0;
  padding: rem(11) 0 0 0;
  background-color: $color-grey-50;
  text-align: center;
}

.c-ad-choices__text {
  font-family: $font-sans-stack;
  font-size: rem(14);
  color: $color-grey-660;
  text-decoration: none;
}

.c-ad-choices__icon {
  display: inline-block;
  width: rem(15);
  height: rem(15);
  margin: 0 rem(-1) rem(-2) 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: top right;
  background-size: contain;
  background-image: url($ad-choices-data-uri);
}
