/// ----------------------------------------------------------------------

/// Link

/// ----------------------------------------------------------------------

@use 'colours';
@use 'spacing';
@use 'borders';
@use 'transitions';
@use 'typography';

/// -------------------
/// Link selectors
/// -------------------

.link {
  display: inline-flex;
  vertical-align: baseline;
  align-items: center;
  font-family: typography.$font-family;
  font-weight: typography.$font-medium;
  text-decoration: none;
  transition: color transitions.$ease, border-color transitions.$ease;

  &--primary {
    color: colours.$brand-one;
    fill: colours.$brand-one;
    border-bottom: borders.$brand-one;

    &:hover {
      color: colours.$brand-two;
      fill: colours.$brand-two;
      border-color: colours.$brand-two;
    }
  }

  &--secondary {
    color: colours.$brand-two;
    fill: colours.$brand-two;
    border-bottom: borders.$brand-two;

    &:hover {
      color: colours.$brand-one;
      fill: colours.$brand-one;
      border-color: colours.$brand-one;
    }
  }

  &--tertiary {
    color: colours.$ui-five;
    fill: colours.$ui-five;
    border-bottom: borders.$ui-five;

    &:hover {
      color: colours.$brand-one;
      fill: colours.$brand-one;
      border-color: colours.$brand-two;
    }
  }

  &--inverse {
    color: white;
    fill: white;
    border-bottom: borders.$ui-one;

    &:hover {
      color: colours.$brand-two;
      fill: colours.$brand-two;
      border-color: colours.$brand-two;
    }
  }
}

/// -------------------
/// Link icon
/// -------------------

.link__icn {
  &--start {
    margin-right: spacing.$xxs;
  }

  &--end {
    margin-left: spacing.$xxs;
  }
}
