//*
//* LINKS
//*

// todo: states focus/active/visited(?)
// todo: merge classes if possible (keep _SC-LINKS-theme.scss in mind)
//? Hover (:hover): When the mouse cursor is place on top of the link without a click
//? Focus (:focus): Like :hover but where the link is selected using the Tab key on a keyboard. Hover and focus states are often styled together.
//? Visited (:visited): The appearance of a link that the user has clicked on the page before when the mouse cursor is not on top of it
//? Active (:active): When the link is in the process of being clicked. It might be super quick, but this is when the mouse button has been depressed and before the click is over.

//* default link style
//*
//* catch all links without a class and applying default link style
//* (excluding links with classes and lesser specificity)
// ! REMEMBER TO ADD EXCLUSIONS TO _SC-LINKS-THEME.SCSS

a:not(.nav__link):not(.mat-button-base):not(.mat-tab-link):not([class*="link"]):not(.bread-crumb-link):not(.mat-list-item) {
  text-decoration: underline solid;
  transition: color $hover-transition-duration ease;

  &:hover,
  &:active {
    text-decoration-thickness: 1px;
    transition: color $hover-transition-duration ease;
  }

  &:focus {
    outline: 0;
    border-radius: 4px;
    padding: 0 4px;
    margin: 0 -4px;
  }
}

//* colored link styles

.link {
  &-primary,
  &-accent,
  &-success,
  &-warning,
  &-danger,
  &-text,
  &-text-muted {
    cursor: pointer;
    text-decoration: underline solid;
    transition: color $hover-transition-duration ease;

    &:hover,
    &:active {
      transition: color $hover-transition-duration ease;
      text-decoration-thickness: 2px;
    }
  }

  &-unstyled {
    color: inherit;
    text-decoration: none;

    &:hover {
      color: inherit;
      text-decoration: none;
    }
  }

  // focus state for all links
  &-primary,
  &-accent,
  &-success,
  &-warning,
  &-danger,
  &-text,
  &-text-muted,
  &-unstyled {
    &:focus {
      outline: 0;
      border-radius: 4px;
      padding: 0 4px;
      margin: 0 -4px;
    }
  }
}

.link-subtle {
  &.link {
    &-primary,
    &-accent,
    &-success,
    &-warning,
    &-danger,
    &-text,
    &-text-muted {
      text-decoration: none;
      transition: color $hover-transition-duration ease;

      &:hover,
      &:active {
        text-decoration: underline solid;
        text-decoration-thickness: 1px;
        transition: color $hover-transition-duration ease;
      }
    }
  }
}

.link-super-subtle {
  &.link {
    &-primary,
    &-accent,
    &-success,
    &-warning,
    &-danger,
    &-text,
    &-text-muted {
      text-decoration: underline solid;
      transition: color $hover-transition-duration ease;

      &:hover,
      &:active {
        text-decoration-thickness: 1px;
        transition: color $hover-transition-duration ease;
      }
    }
  }
}