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

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

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

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

  &_icon {
    display: flex;
    margin-top: 0.1em;
    margin-left: 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 3px;
  }

  &.text-inherit {
    color: inherit;
  }
}