@import "settings.breakpoints";
@import "settings.colors";
@import "settings.fonts";

@import "mixins/settings.fonts";
@import "mixins/tools.mixins";
@import "mixins/objects.footer-tiers";
@import "mixins/components.label";

.o-footer-tier {
  padding: rem(20) rem(10);
  background: $color-white;

  .o-footer-tier__heading {
    @include font-gm-sans-bold;
    font-size: rem(14);
    line-height: line-height(14, 14);
    text-transform: uppercase;
    color: $color-grey-900;
    letter-spacing: rem(1);
    text-align: center;
    margin-top: 0;
    margin-bottom: rem(15);
  }
}

.o-footer-tier--transparent {
  background: none;
}

.o-footer-tier__items {
  display: flex;
  flex-wrap: wrap;
}

// Icons
@include max-height-icons($subscribe-sizes, $subscribe-max-height, "subscribe");
@include max-height-icons($business-sizes, $business-max-height, "business");

.o-footer-tier__col {
  flex: 1;
  margin-right: rem(10);
  padding-right: rem(5);
  border-right: 1px solid $color-stone-200;
  &:last-of-type {
    border-right: none;
    padding-right: 0;
    margin-right: 0;
  }

  @include mq($from: tabletMedium) {
    padding-left: rem(20);
    padding-right: rem(20);
    margin-right: 0;
    &:first-of-type {
      padding-left: 0;
    }
  }
}

.o-footer-tier__icon,
.o-footer-tier__title,
.o-footer-tier__content {
  display: block;
}

.o-footer-tier__icon {
  fill: $color-grey-300;
  padding: 0;
  .o-footer-tier--business & {
    fill: $color-red-500;
  }
  .o-footer-tier--business .o-footer-tier__col:last-of-type & {
    fill: $color-grey-900;
  }
}

.o-footer-tier__title {
  @include c-label-section-feed;
  color: $color-grey-660;
  margin-top: rem(20);
  margin-bottom: rem(10);
}

.o-footer-tier__title__icon {
  width: rem(10);
  height: rem(10);
  margin-left: rem(1.5);
  fill: $color-grey-500;
  display: inline-block;
}

.o-footer-tier__content {
  @include font-gm-sans;
  font-size: rem(14);
  letter-spacing: rem(0.4);
  line-height: line-height(14, 17);
  color: $color-grey-700;
}

.o-footer-tier__link {
  text-decoration: none;
  display: block;
  &:visited {
    .o-footer-tier__title {
      color: $color-grey-660;
    }
  }
  &:hover,
  &:focus {
    // Prevent underline from appearing below icon
    text-decoration: none;
    .o-footer-tier__title {
      color: $color-grey-660;
      text-decoration: underline;
    }
  }
  &:active {
    .o-footer-tier__title {
      color: $color-grey-900;
      text-decoration: underline;
    }
  }
}
