.button--text {
  @extend .u-font-size-4;
  @extend .u-font-weight-400;
  @extend .u-display-inline-flex;
  @extend .u-flex-align-items-center;

  color: palette(blue, base);
  fill: palette(blue, base);
  cursor: pointer;

  &:hover {
    color: lighten(palette(blue, base), 10%);
    fill: lighten(palette(blue, base), 10%);
  }

  &.button--nav {
    @extend .u-color-grey-light;

    &:hover {
      @extend .u-color-blue-base;
    }
  }

  &.button--nav.router-link-active {
    @extend .u-color-blue-base;

    border-bottom: 2px palette(blue) solid;
  }
}