@use '../common/mixins';
@use '../common/variables';

// —————————————————————————————————————————————————————————————————
// elements
// color
// —————————————————————————————————————————————————————————————————

// —————————————————————————————————————————————————————————————————
// elements
// —————————————————————————————————————————————————————————————————

.link {
  display: inline-flex;
  align-items: center;
  font-weight: variables.$weight-regular;
  border-radius: variables.$border-radius-sm;
  text-decoration: underline;
  text-underline-offset: .15em;
  white-space: nowrap;

  &_icon {
    display: flex;
    margin-block-start: 0.1em;
    margin-inline-start: 0.25em;
    
    svg {
      height: 1em;
      width: 1em;
    }
  }
}

// —————————————————————————————————————————————————————————————————
// color
// —————————————————————————————————————————————————————————————————

// change the link colour using text utililty classes

.link {
  color: variables.$primary;
  text-decoration: underline currentColor;

  &:hover {
    text-decoration: underline 0.15em;
  }

  &.text-default { color: variables.$text; }
  &.text-alt { color: variables.$text-alt; }
  &.text-disabled { color: variables.$text-disabled; }
  &.text-contrast { color: variables.$text-contrast; }
  &.text-contrastAlt { color: variables.$text-contrast-alt; }
  &.text-contrastDisabled { color: variables.$text-contrast-disabled; }
  &.text-primary { color: variables.$primary; }
  &.text-secondary { color: variables.$secondary; }
  &.text-inherit { color: inherit; }
}