.wt-infographic {
  @include rem(padding, $grid-typo-spacing-s);
  @include rem(margin, $grid-typo-spacing-m 0 $grid-typo-spacing-l);
  border: solid 2px $ncLightGrey;
  clear: both;
  position: relative;
  text-align: center;

  svg,
  img {
    max-height: calc(75vh - #{$headerHeightNormal + $grid-typo-spacing-m * 2}); // slightly bigger so that there's hints of surrounding content
    max-width: 100%;
  }

  // this enables transform-origin on Firefox 55+
  svg * {
    transform-box: fill-box;
  }

  & + &,
  + p {
    @include rem(margin-top, $grid-typo-spacing-m);
  }

  @include respond-to($grid-breakpoint-m) {
    box-sizing: border-box;
    width: calc(100% + #{$column + $column-spacing});

    .collapsible__content &,
    .article__metadata + & {
      width: 100%;
    }
  }
  // don't hide them from non-screen-reading users
  .enhanced & [aria-hidden='true'] {
    display: inherit;
  }
}

.wt-infographic__graph-wrapper {
  box-sizing: border-box;
}

.wt-infographic__wrapper--hidden {
  display: none;

  @media print {
    display: block;
  }
}

.wt-infographic__wrapper--dynamic {
  @media print {
    display: none;
  }
}

.wt-infographic__expander {
  .enhanced & {
    border: 0;
    box-shadow: none;
    display: none;
    margin-top: 0;
    min-width: 0;

    &,
    &:hover,
    &:focus,
    &:before {
      background-color: transparent;
      color: transparent;
      height: 2em;
      position: absolute;
      right: 0;
      top: 0;
      width: 2em;
    }

    &:before {
      @extend %icon--enter-fullscreen;
      @include rem(padding, 3px);
      background-color: $ncLightGrey;
      background-size: 65%;
      content: '';
      transform: scale(1);
      transform-origin: center center;
      transition: transform $hoverTransLength;
    }

    &:hover:before {
      transform: scale(1.1);
    }

    @include respond-to($grid-breakpoint-s) {
      display: block;
    }
  }

  .enhanced .wt-infographic &[aria-hidden='true'] {
    display: none;
  }

  @include respond-to($grid-breakpoint-s) {
    display: block;
    .enhanced .wt-infographic &[aria-hidden='true'] {
      display: inherit;
    }
  }
}

.wt-infographic--expanded.wt-infographic--expanded {
  background: rgba(255, 255, 255, 0.95);
  // specificity shenanigans
  box-sizing: border-box;
  height: 100vh;
  left: 0;
  overflow: hidden;
  padding: 1em;
  position: fixed;
  text-align: center;
  top: 0;
  width: 100vw;
  z-index: 5;

  @include respond-to($grid-breakpoint-m) {
    @include rem(padding, $grid-typo-spacing-l);
    @include rem(border-width, $grid-typo-spacing-l);
    background-clip: padding-box;
    border-color: rgba(0, 0, 0, 0.6);
    border-style: solid;
  }

  svg,
  img {
    @include rem(margin-right, $column-padding);
    display: inline-block;
    max-height: 75vh;
    object-fit: contain; // for modern browsers, this will ensure the image isn't stretched
  }

  .wt-infographic__wrapper {
    font-size: 0; // this lets the inlined elements fill the entire width without stacking
  }

  .wt-infographic__legend {
    background: #eee;
    box-sizing: border-box;
    display: inline-block;
    padding: 25px;
    vertical-align: top;
    width: 33.33%;
    li {
      width: 100%; // in expanded mode, the legend items shouldn't split into columns
      &:first-of-type {
        margin-top: 0;
      }
    }
  }

  .wt-infographic__legend__list {
    @include rem(margin-top, $grid-typo-spacing-s);
  }

  .wt-infographic__footnote {
    position: static;
  }

  &.wt-infographic--half svg {
    width: 100%;
  }

  .wt-infographic__expander {
    @include button;
    margin-top: 0;
    min-width: 0;
    position: absolute;
    top: 0;

    p + & {
      margin-top: 0;
    }

    &,
    &:before {
      height: 2.5em;
      width: 2.5em;
    }

    &:before {
      @extend %icon--cross--white;
      background-color: transparent;
      padding: 0;
      transform: rotate(0deg);
    }
    &:hover:before {
      transform: rotate(5deg);
    }
  }

  .wt-infographic__graph-wrapper {
    border: 0;
    display: inline-block;
    margin-right: 13px;
    padding: 0;
    position: static;
    width: calc(66.66% - #{$column-padding});
  }
}

.wt-infographic--small,
.wt-infographic--left,
.wt-infographic--right {
  box-sizing: border-box;
  clear: none;
  position: relative;
  width: auto;

  @include respond-to($grid-breakpoint-s) {
    box-sizing: content-box;
    max-width: $column * 2;
  }
}

.wt-infographic--center {
  text-align: center;
  width: auto;
}

.wt-infographic--left {
  clear: left;

  @include respond-to($grid-breakpoint-s) {
    float: left;
  }

  @include respond-to($grid-breakpoint-m) {
    @include rem(margin-left, -$column);
    @include rem(margin-right, $column-padding);
  }
}

.wt-infographic--right {
  clear: right;

  @include respond-to($grid-breakpoint-s) {
    float: right;
  }

  @include respond-to($grid-breakpoint-m) {
    @include rem(margin-right, -$column);
    @include rem(margin-left, $column-padding);
  }
}

.wt-infographic--size-half {
  display: inline-block;
  width: 49%;
}

.wt-infographic--size-third {
  display: inline-block;
  width: 31%;

  .wt-infographic__title {
    @include font-size-with-line-height($bodyFontSize, $bodyLineHeight);
  }
}

.wt-infographic__title {
  @include rem(margin, 0 $grid-typo-spacing-m $grid-typo-spacing-m 0);
  text-align: center;
}

.wt-infographic__legend {
  @include rem(
    padding,
    $grid-typo-spacing-xxs $grid-typo-spacing-xxs 0 $grid-typo-spacing-xxs
  );
  font-size: 0;
  text-align: left;

  .enhanced &[aria-hidden='true'] {
    display: block;
  }
  .enhanced .wt-infographic--expanded &[aria-hidden='true'] {
    display: inline-block;
  }
}

.wt-infographic__legend__title {
  margin: 0;
}

.wt-infographic__legend__list {
  @include rem(margin, $grid-typo-spacing-s 0 $grid-typo-spacing-xxxs);

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

.wt-infographic__footnote {
  @include font-size-with-line-height($smallTextFontSize, $smallTextLineHeight);
  @include rem(bottom, -$grid-typo-spacing-s);

  color: $ncOrange;
  position: absolute;
  right: 0;
  text-align: right;

  a {
    color: $ncOrange;
    &:hover {
      color: $ncDarkBlue;
    }
  }

  .wt-infographic__wrapper + & {
    @include rem(margin-top, $grid-typo-spacing-xxxs);
  }

  .file-size {
    @include rem(margin-left, $grid-typo-spacing-xxxs);
    display: inline-block;
    font-size: 12px;
    text-decoration: none;
  }
}

.wt-infographic__number__title {
  @include baselineNumbers;
  font-family: $supplementaryFont;
  margin-top: 0;
  opacity: 0;
  transition: opacity 1.5s 0.2s;

  @include font-size-with-line-height($h1FontSizeSmall, $h1LineHeightSmall);

  @include respond-to($grid-breakpoint-s) {
    @include font-size-with-line-height($h1FontSize, $h1LineHeight);
  }
  .wt-infographic-component--visible & {
    opacity: 1;
  }
}

.wt-infographic__number {
  @include rem(padding, $grid-typo-spacing-m);
  @include rem(margin-top, 3px);
  background: $ncLightGrey;
  border-bottom-right-radius: 0;
  box-sizing: border-box;
  color: $ncDarkBlue;
  position: relative;
  width: 100%; // we don't have a wrapping element, so we can't fit these boys in side by side by setting outer font-size: 0.

  @include respond-to($grid-breakpoint-s) {
    @include rem(padding, $column/2 $grid-typo-spacing-m);
    @include rem(margin, 0 #{-$column-spacing - $column-padding} 3px $column/2);
    box-sizing: content-box;
    display: block;
    width: $column * 2;
  }
}

.wt-infographic__number--first {
  @include rem(
    border-top-left-radius,
    $grid-typo-spacing-m + $grid-typo-spacing-xxs
  );
  @include rem(margin-top, $grid-typo-spacing-m);
}

.wt-infographic__number--last {
  @include rem(
    border-bottom-right-radius,
    $grid-typo-spacing-m + $grid-typo-spacing-xxs
  );
  vertical-align: top;

  @include respond-to($grid-breakpoint-s) {
    @include rem(margin-bottom, $grid-typo-spacing-s);
    margin-top: 0;
  }

  &:not(.wt-infographic__number--first) {
    border-top-left-radius: 0;
  }
}

.wt-infographic[data-type='number'],
.wt-infographic[data-type='figure-gender'] {
  border: 0;

  svg {
    max-height: 30vh;
  }

  .wt-infographic__footnote,
  .wt-infographic__expander {
    display: none;
  }
}
// for number boxouts, we don't show any fallback (for now)
.wt-infographic[data-type='number'] {
  .wt-infographic__wrapper--hidden {
    @media print {
      display: none;
    }
  }
}

.wt-infographic__number-caption,
.wt-infographic__legend__item {
  @include font-size-with-line-height($smallTextFontSize, $smallTextLineHeight);
  margin-top: 0;
}

.wt-infographic__legend__item {
  @include rem(padding-right, $column-spacing);
}

.wt-infographic-component--visible
.wt-infographic__bar-simple.wt-infographic__bar-simple--hide-labels {
  .wt-infographic__datapoint-label {
    opacity: 0;
  }
  &:hover .wt-infographic__datapoint-bar {
    &,
    + .wt-infographic__datapoint-label {
      transition: opacity $hoverTransLength;
    }
    opacity: 0.2;
    &:hover {
      opacity: 1;
      + .wt-infographic__datapoint-label {
        opacity: 1;
        transition: opacity $hoverTransLength;
      }
    }
  }
}

.wt-infographic__burst,
.wt-infographic__pie-stacked {
  text {
    font-size: 4px;

    @include respond-to($grid-breakpoint-s) {
      font-size: 2.5px; // this is a SVG element, so we're not actually doing subpixel rendering
    }
  }
  // so that the above doesn't override this
  .wt-infographic__radial-gridlines text {
    font-size: 2px;
  }
  path {
    transform: scale(0);
    transition: transform 1s 0.2s, opacity 0.25s;
    &:hover {
      transform: scale(1.025);
      transition: transform $hoverTransLength, opacity 0.25s;
    }
    .wt-infographic-component--visible & {
      transform: scale(1);
    }
  }
}

.wt-infographic__legend__item,
.enhanced .wt-infographic__legend__item {
  box-sizing: border-box;
  display: inline-block;
  padding: 0;
  vertical-align: top;
  width: 100%;

  .enhanced &:before {
    content: none;
  }
  &,
  & + & {
    @include respond-to($grid-breakpoint-s) {
      @include rem(margin-top, $grid-typo-spacing-xxs);
      width: 50%;
    }
  }
}

.wt-infographic__legend__item-color {
  display: inline-block;
  height: 1em;
  vertical-align: text-top;
  width: 1em;
}

.wt-infographic__treemap {
  .rect-wrapper {
    transform: scale(0);
    transform-origin: center center;
    transition: transform 1s 0.2s;

    .wt-infographic-component--visible & {
      transform: scale(1);
    }
  }
  rect {
    cursor: pointer;
    transition: fill $hoverTransLength;
  }
}

$bounceEasing: cubic-bezier(0.82, 0.02, 0.75, 1.26);

@include keyframes(grow) {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@include keyframes(growY) {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

@include keyframes(fadeIn) {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.wt-infographic__bar-simple,
.wt-infographic__bar-stretch,
.wt-infographic__bar-stacked,
.wt-infographic__bar-double,
.wt-infographic__figure-gender {
  // this should match the data bars in any bar chart-like graphic
  .wt-infographic__datapoint-bar {
    transform: scaleY(0);
    transform-origin: center bottom;
    .wt-infographic-component--visible & {
      animation: growY 1s 0.2s $bounceEasing forwards;
    }
  }
  // this should match the labels of data bars
  .wt-infographic__datapoint-label,
  .wt-infographic__figure-gender__category {
    opacity: 0;
    transition: opacity 1s 0.2s $bounceEasing;

    .wt-infographic-component--visible & {
      opacity: 1;
    }
  }
  .wt-infographic__line-component__datapoint {
    transform: scale(0);
    transform-origin: center center;
    .wt-infographic-component--visible & {
      animation: grow 0.5s 0.2s $bounceEasing forwards;
    }
  }
}

.wt-infographic__bar-stretch {
  .wt-infographic__stretch-bar--top {
    transform-origin: center top;
  }
  .wt-infographic__line-component__datapoint,
  .wt-infographic__line-component__label-part {
    animation-delay: 1.2s;
  }
}
// stroke-dashoffset can be used in SVG to create a gradual path drawing effect
// https://css-tricks.com/svg-line-animation-works/
.wt-infographic-component--visible .wt-infographic__bar-stacked {
  .wt-infographic__bar-stacked__text {
    animation: fadeIn 1s 0.2s $bounceEasing forwards;
    opacity: 0;
  }
}

@include keyframes(pathFill) {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

.wt-infographic__path--fill-anim {
  .wt-infographic-component--visible & {
    animation: pathFill 1.5s 0.5s ease-in forwards;
  }
  .is-ie & {
    animation: none;
    // IE can't animate stroke-dashoffset
    stroke-dashoffset: 0;
  }
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}

.wt-infographic__auxiliary-data .wt-infographic__line-component {
  opacity: 0.5;
  transition: opacity $hoverTransLength;
  &:hover {
    opacity: 1;
  }
}

.wt-infographic-component--visible .wt-infographic__line {
  .wt-infographic__line-component__label-part,
  .wt-infographic__line-component__datapoint {
    animation: none;
  }
  .wt-infographic__line-component__datapoint {
    transform: scale(0);
  }
  .wt-infographic__line-component {
    transition: opacity $hoverTransLength;

    &:hover {
      cursor: pointer;
      opacity: 1;
      transform: translateZ(1px);

      .wt-infographic__line-component__datapoint {
        animation: grow $hoverTransLength/2 $bounceEasing forwards;
        transform-origin: center center;
      }
      .wt-infographic__line-component__label-part {
        animation: fadeIn $hoverTransLength/2 $bounceEasing forwards;
      }
      ~ .wt-infographic__line-component {
        opacity: 0.05;
      }
    }
  }
}

.wt-infographic__line:hover {
  .wt-infographic__line-component {
    opacity: 0.4;
  }
}

.wt-infographic__pie-stacked {
  path {
    transition-delay: 0s;
    transition-timing-function: ease-out;
  }

  @for $index from 1 through 5 {
    .wt-infographic__pie-stacked__arc:nth-of-type(#{$index}) path {
      transition-delay: (6 - $index) * 0.1s;
    }
  }
}

.wt-infographic__figure-gender {
  .wt-infographic__figure-gender__cover {
    &,
    .wt-infographic-component--visible & {
      animation: none;
      transform: none;
    }
  }
  .wt-infographic__figure-gender__filler {
    transition-delay: 0s;
    transition-timing-function: ease-out;
  }

  @for $index from 1 through 5 {
    .wt-infographic__figure-gender__filler:nth-of-type(#{$index}) path {
      transition-delay: (6 - $index) * 0.1s;
    }
  }

  .wt-infographic__figure-gender__aux {
    opacity: 0;
    .wt-infographic-component--visible & {
      animation: fadeIn 1s 0.2s $bounceEasing forwards;
    }
  }
}

.wt-infographic__figures__filler {
  transform: scale(0);
  transform-origin: center center;
  transition: transform 1s;

  .wt-infographic-component--visible & {
    transform: scale(1);
  }
}