@import "../settings.breakpoints";

@import "tools.mixins";

// Icon Sizes
// Since each icon is different widths/heights this was a solution to make them all align properly
$subscribe-sizes:  (56 46), (90 41), (60 50), (40 51);
$business-sizes:   (87 35), (80 29), (145 32), (148 36);
$advisor-sizes:    (63 44), (56 56), (56 56), (56 56);
// This variable is used to store the height values
$subscribe-max-height: ();
$business-max-height: ();
$advisor-max-height: ();

@mixin max-height-icons($sizes, $array, $container) {
  @each $width, $height in $sizes {
    $array: append($array, $height, comma);
  }
  $max-value: max($array...);
  $i: 0;
  @each $width, $height in $sizes {
    $i: $i + 1;
    .o-footer-tier--#{$container} .o-footer-tier__col:nth-of-type(#{$i}) {
      .o-footer-tier__icon {
        width: rem($width);
        height: rem($height);
        min-height: rem($max-value);
        @if $container == business {
          @include mq($from: tabletMedium) {
            width: rem($width + ($width * .2));
            height: rem($height + ($height * .2));
            min-height: rem($max-value + ($max-value *.2));
          }
        }
      }
    }
  }
}

// default icons sizes
@mixin default-height-icons() {
  .o-footer-tier__icon {
    width: rem(56);
    height: rem(56);
    min-height: rem(56);
  }
}
