@import "settings.breakpoints";
@import "settings.colors";
@import "settings.vars";
@import "settings.z-index";
@import "mixins/components.controls";
@import "mixins/settings.fonts";
@import "mixins/tools.mixins";

///////////////////////////////
// Text Sizer
///////////////////////////////

.c-control--text-resizer {
  @include c-control--text-resizer;
}

.c-control--text-resizer--plus-2 {
  @include c-control--text-resizer-2;
}

.c-control--text-resizer--plus-4 {
  @include c-control--text-resizer-4;
}

.c-control--text-resizer--plus-6 {
  @include c-control--text-resizer-6;
}

.c-text-resizer {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.c-text-resizer__item {
  display: flex;
  flex-direction: column;
  margin: 0 rem(10) 0 0;
}

.c-text-resizer__label {
  @include font-gm-sans;
  color: $color-white;
  font-size: rem(14);
  text-align: center;
  padding: rem(5) 0;
}

// this is the exact same styles as the article body text
.c-text-resizer__body-text {
  @include font-pratt;
  font-size: rem(18);
  line-height: 1.3;
  color: $color-white;
  margin: 0;
  padding: rem(10) 0;
  white-space: normal;

  &.c-text-resizer__body-text--plus-2 {
    font-size: rem(20);
  }

  &.c-text-resizer__body-text--plus-4 {
    font-size: rem(22);
  }

  &.c-text-resizer__body-text--plus-6 {
    font-size: rem(24);
  }
}
