@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) 0 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--disabled {
  opacity: 0.5;
}

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

.o-footer-tier__items {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-content: flex-start;

  > .o-footer-tier__col {
    display: flex;
    flex-direction: column;
  }

  // PageBuilder support for parent Chain and equal height cards
  > .o-footer-tier__col > .u-wrapper,
  .o-footer-tier__group {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
}

// Icons
@include default-height-icons(); // overridden by below max-heights
@include max-height-icons($subscribe-sizes, $subscribe-max-height, "subscribe");
@include max-height-icons($business-sizes, $business-max-height, "business");
@include max-height-icons($advisor-sizes, $advisor-max-height, "advisor");

.o-footer-tier__col {
  flex-grow: 0;
  flex-shrink: 1;
  border-bottom: 1px solid $color-stone-200;
  margin-bottom: rem(20);

  &:last-of-type {
    border-bottom: none;
  }
}

@include mq($from: tablet) {
  .o-footer-tier__items {
    flex-direction: row;
  }
  .o-footer-tier__col {
    flex-basis: 25%;
    padding-top: rem(3);
    padding-left: rem(10);
    padding-right: rem(15);
    border-right: 1px solid $color-stone-200;
    border-bottom: none;

    &:first-of-type {
      padding-left: 0;
    }
    &:last-of-type {
      padding-right: 0;
      border-right: none;
    }
  }
}

@include mq($from: tabletWide) {
  .o-footer-tier__col {
    padding-left: rem(20);
    padding-right: rem(20);
  }
}

.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;
  padding-bottom: rem(10);
}

.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;
    }
  }
}

.o-footer-tier__cta {
  margin-top: auto;
  margin-bottom: rem(24);
  padding-top: rem(15);
  min-height: rem(44);
  justify-content: space-between;
  display: flex;
  flex-direction: row;

  .c-button {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
    padding-left: 0;
    padding-right: 0;

    + .c-button {
      margin-left: rem(10);
    }
  }
}

@include mq($from: tablet) {
  .o-footer-tier__cta {
    margin-bottom: rem(5);
  }
}

@include mq($from: tablet, $until: tabletMedium) {
  .o-footer-tier__cta {
    flex-direction: column;

    .c-button {
      + .c-button {
        margin-left: 0;
        margin-top: rem(8);
      }
    }
  }
}

@include mq($from: tabletWide) {
  .o-footer-tier__cta {
    justify-content: flex-start;

    .c-button {
      flex-grow: 0;
      flex-shrink: 1;
      flex-basis: auto;
      padding-left: rem(10);
      padding-right: rem(10);
    }
  }
}

@include mq($from: desktop) {
  .o-footer-tier__cta {
    .c-button {
      padding-left: rem(20);
      padding-right: rem(20);
    }
  }
}
