@import "settings.colors";

@import "mixins/settings.fonts";
@import "mixins/tools.functions";

.c-column-lists {
  background-color: $color-grey-700;
  display: flex;
}
.c-column-list {
  margin-right: rem(20);
  flex: 1;
  &:last-of-type {
    margin-right: 0;
  }
}
.c-column-list__heading {
  @include font-gm-sans-bold;
  margin: 0;
  color: $color-white;
  font-size: rem(12);
  line-height: 1.2;
  letter-spacing: rem(0.4);
  text-transform: uppercase;
}
// An extra wrapper element is required for IE11 :(
// See: https://github.com/philipwalton/flexbugs#flexbug-3
.c-column-list__heading,
.c-column-list__heading-inner,
.c-column-list__item,
.c-column-list__item-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.c-column-list__heading-inner,
.c-column-list__item-inner {
  min-height: rem(45); // 44 + 1px border
  border-bottom: 1px solid $color-grey-500;
}
.c-column-list__items {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.c-column-list__link {
  padding: rem(8) 0;
  flex: 1;
  display: flex;
  align-items: center;
  @include font-gm-sans;
  font-size: rem(14);
  line-height: line-height(14, 16);
  letter-spacing: rem(0.4);
  color: $color-white;
  text-decoration: none;
  &:hover,
  &:focus {
    text-decoration: underline;
  }
}
