.icon-composite {
  $size: 32px;
  $multiplier: 1.5;
  // @media print {
  //   $multiplier: 1;
  // }
  $bigger: $size * $multiplier;
  $smaller: $bigger * 0.75;
  $offset: $bigger/4 - $smaller/2;
  font-size: 0.8em;

  height: $bigger;
  width: $bigger;
  display: inline-block;
  position: relative;
  padding: 0px;
  margin: 0 6px;
  border-radius: 2px;

  .icon .factorio-icon {
    height: 100%;
  }

  .icon-bg {
    height: 100%;
    width: 100%;
    filter: blur(0.7px) brightness(0.75);
  }

  .icon-fg {
    height: $smaller;
    width: $smaller;
    position: absolute;
    left: $offset;
    top: $offset;
    filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #111)
      drop-shadow(0 0 2px #111) brightness(1.1);
  }

  .text-sm {
    font-size: 0.875em;
  }

  span {
    position: absolute;
    font-weight: 700;
  }

  .rate-text {
    bottom: 0;
    left: 0;
    color: $c-pallette-text-muted;
    font-size: 0.8em;
    text-shadow: 0 1px 1px #000, 0 -1px 1px #000, 1px 0 1px #000,
      -1px 0 1px #000;
  }

  .count-text {
    bottom: 0;
    right: 0;
    color: #fff;
    font-size: 1em;
    text-shadow: 0 1px 1px #000, 0 -1px 1px #000, 1px 0 1px #000,
      -1px 0 1px #000;
  }
}

.factorio-icon-pad {
  $v-pad: 3px;
  $box-size: 32px;
  $size: calc(#{$box-size} - #{$v-pad} * 2);
  padding: $v-pad;
  margin: 0 2px;
  display: inline-block;

  i {
    height: $box-size;
    width: $box-size;
    font-size: $size;
    margin-bottom: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}
