// this is a special look of the info box for the priority areas pages. The following variables are very specific and aren't used elsewhere so we include them here instead of settings.scss
$bInfoBoxGraphicSize: 350px;
$bInfoBoxFontSize: $bodyFontSize;
$bInfoBoxLineHeight: 25px;

$bInfoBoxOffsetX: 70px;
$bInfoBoxOffsetY: 57px;
/*------------------------------------*\
INFO BOX THEMES
\*------------------------------------*/
// default info box color is light blue
%infoBoxLightBackgroundLink {
  a {
    @extend %link__colour--light-theme;
  }
}
%infoBoxDarkBackgroundLink {
  a {
    @extend %link__colour--dark-theme;
  }
}
%infoBoxBrandedBackground {
  @include font-size-with-line-height($bInfoBoxFontSize, $bInfoBoxLineHeight);
  background-position: calc(100% + #{$bInfoBoxOffsetX})
    calc(100% + #{$bInfoBoxOffsetY});
  background-repeat: no-repeat;
  background-size: $bInfoBoxGraphicSize;
}
/*------------------------------------*\
DEFAULT INFO BOX
\*------------------------------------*/
.info-box__body {
  @extend %infoBoxLightBackgroundLink;
  // TODO: these should be new typo spacing vars
  @include rem(padding, 30px 25px);
  background-color: $infoBoxBackgroundColour;
  box-sizing: border-box;
  h3 {
    margin-bottom: $grid-typo-spacing-xxxs;
  }

  p:first-of-type {
    margin-top: 0;
  }

  *:first-child {
    margin-top: 0;
  }

  *:last-child {
    margin-bottom: 0;
  }
}

.info-box,
.summary-box {
  @include rem(margin, $grid-typo-spacing-m 0);

  @media screen {
    @include stickOutBoxInContent;
  }
}

.info-box__footnote {
  @include font-size-with-line-height($smallTextFontSize, $smallTextLineHeight);

  &:not(:empty) {
    @include rem(margin-top, $grid-typo-spacing-xxs);
  }

  .info-box--highlight & {
    @include rem(padding, 0 $grid-content-padding);

    @include respond-to($grid-breakpoint-s) {
      padding: 0;
    }
  }
}

/*------------------------------------*\
    HIGHLIGHT INFO BOX
\*------------------------------------*/

.info-box--highlight {
  .info-box__body {
    @extend %infoBoxDarkBackgroundLink;
    background-color: $ncLightGrey;
    color: $white;
    h3 {
      @include font-size-with-line-height($h2FontSizeSmall, $h2LineHeightSmall);

      @include respond-to($grid-breakpoint-s) {
        @include font-size-with-line-height($h2FontSize, $h2LineHeight);
      }
      color: $ncLightOrange;
    }
    li {
      @include rem(margin-bottom, $grid-typo-spacing-xxs);
      // this allows us to not use calc()
      padding-left: 1.4em;

      &:before {
        background-color: $ncLightOrange;
      }

      & + &:not(:first-of-type) {
        @include rem(margin-top, $grid-typo-spacing-s / 2);
      }
    }
  }
}
.info-box--highlight.info-box--branded .info-box__body {
  @extend %infoBoxBrandedBackground;

  @include respond-to($grid-breakpoint-s) {
    @include stickOutBoxInContent;
  }
  background: url('../images/w-infobox-graphic.svg') no-repeat
    $paBoxoutBackground;
  background-position: calc(100% + #{$bInfoBoxOffsetX})
    calc(100% + #{$bInfoBoxOffsetY});
  background-size: $bInfoBoxGraphicSize;
  float: none;
  // not using rem because it shouldn't be font size-dependent
  left: -$grid-content-padding;
  position: relative;
  width: calc(100% + #{$grid-content-padding * 2});
}
/*------------------------------------*\
    GREY INFO BOX
\*------------------------------------*/

.info-box--grey .info-box__body {
  @extend %infoBoxLightBackgroundLink;
  background-color: $ncLightGrey;
}
.info-box--grey.info-box--branded .info-box__body {
  @extend %infoBoxBrandedBackground;
  background-image: url('../images/w-infobox-graphic--grey.svg');
}

/*------------------------------------*\
    CAREERS PROMO
\*------------------------------------*/

.career-promo {
  .info-box__body {
    background-image: url('../images/hexagonArtwork.svg');
    background-position: calc(100% + 40px) calc(100% + 40px);
    background-repeat: no-repeat;
    background-size: 230px;
    .career-promo__item__link a {
      @extend %link--standalone;
      @include rem(margin-top, $grid-typo-spacing-s - 5);
      @include font-size-with-line-height(
        $firstLevelNavigationLinkTextSize,
        $bodyLineHeightSmall
      );
    }
  }
}
/*------------------------------------*\
    SUMMARY BOX PROMO
\*------------------------------------*/
.js .summary-box.info-box {
  @include respond-to($grid-breakpoint-s) {
    @include rem(margin-right, -$column);
    @include rem(margin-left, $column-spacing);
    float: right;
    left: auto;
    margin-top: 0;
    top: 0;
    width: 275px;
  }
}

/*------------------------------------*\
    LINK LIST INFO BOX
\*------------------------------------*/
.promo__section-title {
  margin-top: 0;
  padding-top: 0;
}

.promo__section-description {
  @include rem(margin-bottom, $bodyFontSize);
}