@import '../../../scss/settings/colours';
@import '../../../scss/settings/typography';

.link {
  composes: medium from '../../Typography/Text/Text.modules.scss';
  display: inline-block;
  text-decoration: none;
  max-width: 100%;

  @include helvetica-neue-roman-55;

  &:hover {
    .rightChevron {
      transform: translateX(0.25rem);
    }

    .leftChevron {
      transform: translateX(-0.25rem);
    }
  }
}

.primary {
  composes: link;

  &:link,
  &:visited {
    color: $color-primary;
  }
}

.secondary {
  composes: link;

  &:link,
  &:visited {
    color: $color-secondary;
  }
}

.inverted {
  composes: link;

  &:link,
  &:visited {
    color: $color-white;
  }
}

.chevron {
  display: inline-block;
  transition: transform 300ms;
}

.rightChevron {
  composes: chevron;
}

.leftChevron {
  composes: chevron;
}