@import "settings.colors";

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

.c-text-resizer__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}
.c-text-resizer__item {
  display: flex;
  flex-direction: column;
  margin: 0 rem(10) 0 0;
}
.c-text-resizer__button {
  .c-button {
    width: rem(44);
    padding-left: 0;
    padding-right: 0;
    @include font-gm-sans;
    position: relative;
    &::before {
      content: "";
      position: absolute;
      height: 1px;
      bottom: rem(5);
      left: rem(5);
      right: rem(5);
      background-color: $color-white;
      visibility: hidden;
      transform: scaleX(0);
      transition: all 0.2s ease-out;
    }
    &:hover,
    &:focus,
    &:active {
      &::before {
        visibility: visible;
        transform: scaleX(1);
      }
    }
  }
}
.c-text-resizer__button--plus-2 {
  .c-button {
    font-size: rem(20);
  }
}
.c-text-resizer__button--plus-4 {
  .c-button {
    font-size: rem(22);
  }
}
.c-text-resizer__button--plus-6 {
  .c-button {
    font-size: rem(24);
  }
}
.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__preview-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__preview-text--plus-2 {
    font-size: rem(20);
  }
  &.c-text-resizer__preview-text--plus-4 {
    font-size: rem(22);
  }
  &.c-text-resizer__preview-text--plus-6 {
    font-size: rem(24);
  }
}
