_highlighted_facts.scss

$highlighted-fact-bg-color: $light-gray;
$highlighted-fact-color: $uw-gray;

//faculty / uw colors

$faculty-colors: (".uwdefault": $dark-gray, ".ahs": #005963, ".arts": #D93F00, ".engineering": #57058B, ".environment": #607000, ".math": #C60078, ".science": #0033BE);

@function faculty-color($key: $value) {
  @return map-get($faculty-colors, $key);
}

// $highlighted-fact-color: faculty-color('.math'); // #8e3329

//fonts
$highlighted-fact-font: $base-font-family;
$highlighted-fact-font-big: $condensed-font-family;
$highlighted-fact-font-medium: $highlighted-fact-font;
$highlighted-fact-font-small: $font-1451-medium;
$highlighted-fact-font-caption: $serif-font-family;

//appearance
$global-radius: 3px;
$global-rounded: 1000px;
$highlighted-fact-radius: $global-radius;
$highlighted-fact-round: $global-rounded;

// $highlighted-fact-color: faculty-color('.math'); // #8e3329
$highlighted-fact-color-tinted: mix(white, $highlighted-fact-color, 10%);
$highlighted-fact-color-shaded: mix(black, $highlighted-fact-color, 10%);

//ul
.highlighted-fact-wrapper {
  width: 100%;
  display: block;
  float: left;
  height: auto;
  margin: 0;
  position: relative;
  list-style-type: none;
  clear: both;

  .uwm-article-body & {
    padding: 0;
  }
}

.data-usecarousel,
.data-numberpercarousel {
  visibility: hidden;
  height: 0;
}

/* Override default display: block from owl script.
  Ensures bubbles are the same height .
*/
.ff-with-bubbles .owl-wrapper,
.ff-with-bubbles .owl-item {
  display: flex !important;
}

%highlighted-fact {
  text-align: center;
  font-weight: 300;
  border-radius: $highlighted-fact-radius + 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem;
  margin: 0 1rem;
  position: relative;
  width: 100%;

  img {
    margin: 0 auto;
    margin-bottom: 1rem;
    display: block;
    height: 6rem;
    width: auto;
  }

  span {
    text-align: center;
    clear: both;
    float: none;
    display: block;
  }
}

.highlighted-fact-tall {
  border-top: 1px solid $medium-gray;
  color: $medium-gray;
  padding-top: 3rem;

  span {}

  @include media($medium-screen) {
    padding-left: 1.5rem;
    border-top: 1px solid $white;
    border-left: 1px solid $medium-gray;
  }
}

.highlighted-fact {
  @extend %highlighted-fact;

  .ff-with-bubbles & {
    background-color: $highlighted-fact-bg-color;
  }

  $highlighted-fact-color: faculty-color(".uwdefault");

  .highlighted-fact-text-small {
    background-color: $uw-gold;
    color: $uw-black;
  }

  .highlighted-fact-infographic .graph {
    background-color: $uw-gold;
  }

  .highlighted-fact-text-big,
  .highlighted-fact-text-medium {
    color: $uw-black;
  }

  .ahs &,
  &.ahs {
    $highlighted-fact-color: faculty-color(".ahs");

    .highlighted-fact-text-big,
    .highlighted-fact-text-medium {
      color: $highlighted-fact-color;
    }

    .highlighted-fact-text-small {
      background-color: $highlighted-fact-color;
      color: white;
    }

    .highlighted-fact-infographic .graph {
      background-color: $highlighted-fact-color;
    }
  }

  .arts &,
  &.arts {
    $highlighted-fact-color: faculty-color(".arts");

    .highlighted-fact-text-big,
    .highlighted-fact-text-medium {
      color: $highlighted-fact-color;
    }

    .highlighted-fact-text-small {
      background-color: $highlighted-fact-color;
      color: white;
    }

    .highlighted-fact-infographic .graph {
      background-color: $highlighted-fact-color;
    }
  }

  .engineering &,
  &.engineering {
    $highlighted-fact-color: faculty-color(".engineering");

    .highlighted-fact-text-big,
    .highlighted-fact-text-medium {
      color: $highlighted-fact-color;
    }

    .highlighted-fact-text-small {
      background-color: $highlighted-fact-color;
      color: white;
    }

    .highlighted-fact-infographic .graph {
      background-color: $highlighted-fact-color;
    }
  }
  .environment &,
  &.environment {
    $highlighted-fact-color: faculty-color(".environment");

    .highlighted-fact-text-big,
    .highlighted-fact-text-medium {
      color: $highlighted-fact-color;
    }

    .highlighted-fact-text-small {
      background-color: $highlighted-fact-color;
      color: white;
    }

    .highlighted-fact-infographic .graph {
      background-color: $highlighted-fact-color;
    }
  }

  .math &,
  &.math {
    $highlighted-fact-color: faculty-color(".math");

    .highlighted-fact-text-big,
    .highlighted-fact-text-medium {
      color: $highlighted-fact-color;
    }

    .highlighted-fact-text-small {
      background-color: $highlighted-fact-color;
      color: white;
    }

    .highlighted-fact-infographic .graph {
      background-color: $highlighted-fact-color;
    }
  }

  .science &,
  &.science {
    $highlighted-fact-color: faculty-color(".science");

    .highlighted-fact-text-big,
    .highlighted-fact-text-medium {
      color: $highlighted-fact-color;
    }

    .highlighted-fact-text-small {
      background-color: $highlighted-fact-color;
      color: white;
    }

    .highlighted-fact-infographic .graph {
      background-color: $highlighted-fact-color;
    }
  }

  img {}

  .highlighted-fact-wrapper & {}

  .text-left &,
  &.text-left {
    text-align: left;
    img {
      float: left;
      clear: both;
    }

    span {
      text-align: left;
      display: block;
      clear: left;
    }
  }

  .text-center &,
  &.text-center {
    span {
      text-align: center;
      display: block;
      clear: both;
    }
  }

  .text-right &,
  &.text-right {
    text-align: right;
    img {
      margin: 0;
      float: right;
      clear: both;
    }

    span {
      text-align: right;
      display: block;
      clear: right;
    }
    .highlighted-fact-infographic {
      margin-right: 0;
    }
  }

  &.img-left {
    img {
      float: left;
    }

    span {
      text-align: left;
      display: block;
      clear: none;
    }
  }

  &.img-right {
    img {
      float: right;
    }

    span {
      text-align: right;
      display: block;
      clear: none;
    }
  }
}

.highlighted-fact-text-big {
  font-family: $highlighted-fact-font-big;
  font-size: modular-scale(10);
  font-weight: 600;
  line-height: 1.2;
  hyphens: none;
}

.highlighted-fact-text-medium {
  font-family: $highlighted-fact-font-medium;
  font-size: modular-scale(2);
  font-weight: 300;
  color: $uw-gray;
  line-height: 1.2;
  padding: 0.25rem 0rem;
  hyphens: none;
}

.highlighted-fact-text-small {
  font-family: $highlighted-fact-font-small;
  color: $white;
  font-size: modular-scale(0);
  line-height: 1.25;
  margin: 1rem auto;
  padding: 0.5rem 1.25rem;
  hyphens: none;
  display: inline-block !important;
}

.highlighted-fact-caption {
  p {
    font-family: $highlighted-fact-font;
    line-height: 1.2;
    float: none;
    font-size: modular-scale(-1);
  }

  font-family: $highlighted-fact-font;
  line-height: 1.2;
  font-size: modular-scale(-1);
  font-style: italic;
  padding: 0.25rem 0rem;
  hyphens: none;
}

/*
 * Infographics
 */

.highlighted-fact-infographic {
  margin: 0 auto;
  max-width: 250px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .number,
  .timer {
    font-family: $font-bg-cond-book;
    color: #4e4e4e;
  }
  .timer {
    font-size: 2.3em;
  }
  .graph {
    background: $black;
    display: block;
  }

  &.infographic-number {
    font-size: 3.2rem;
    .timer {
      font-size: 1em;
      margin-right: .5rem;
      display: inline;
    }
  }

  &.infographic-vertical {
    .graph-wrapper {
      background: $medium-gray;
      height: 200px;
      width: 80px;
      position: relative;
    }

    .graph {
      width: 80px;
      min-height: 20px;
      position: absolute;
      bottom: 1px;
    }
    .timer {
      margin-left: .5em;
    }
    .timer:after {
      content: '%';
      display: inline-block;
    }

  }
  &.infographic-horizontal {
    margin: 0;
    max-width: 100%;
    padding: 0 1em;
    .graph-wrapper {
      background: $medium-gray;
      height: 80px;
      width: 100%;
      width: calc(100% - 5em);
      position: relative;
      margin-bottom: 1em;
    }
    .graph {
      height: 80px;
      width: 1px;
      margin-right: 1em;
    }
    .timer {
      width: 3em;
    }
    .timer:after {
      content: '%';
      display: inline-block;
    }
  }
}

.infographic-half_circle svg {
  margin: calc(-0.14 * 100%) 0 calc(-0.4 * 100%);
}