@import '@teamleader/ui-colors';
@import '@teamleader/ui-typography';
@import '@teamleader/ui-utilities';

.link {
  composes: reset-font-smoothing;
  cursor: pointer;
  background: transparent;
  border: 0;
  font-size: 100%;
  padding: 0;

  svg {
    transform: translate3d(0, -2px, 0);
  }

  * + svg,
  svg + * {
    margin-left: var(--spacer-smallest);
  }

  &:not(.inherit) {
    color: var(--color-aqua-dark);
    font-family: var(--font-family-regular);
  }

  &.inherit {
    color: inherit;

    &:hover,
    &:active {
      color: inherit;
    }
  }

  &:not(.inherit),
  &.has-icon {
    text-decoration: none;

    &:hover,
    &:active {
      text-decoration: underline;
    }
  }

  &.inherit:not(.has-icon) {
    text-decoration: underline;

    &:hover,
    &:active {
      text-decoration: none;
    }
  }
}

@import '@teamleader/ui-colors';
@import '@teamleader/ui-typography';
@import '@teamleader/ui-utilities';

.link {
  composes: reset-font-smoothing;
  cursor: pointer;
  background: transparent;
  border: 0;
  font-size: 100%;
  padding: 0;

  svg {
    transform: translate3d(0, -2px, 0);
  }

  * + svg,
  svg + * {
    margin-left: var(--spacer-smallest);
  }

  &:active {
    outline: 0;
  }

  &:not(.inherit) {
    color: var(--color-aqua-dark);
    font-family: var(--font-family-regular);
  }

  &.inherit {
    color: inherit;

    &:hover,
    &:active {
      color: inherit;
    }
  }

  &:not(.inherit),
  &.has-icon {
    text-decoration: none;

    &:hover,
    &:active {
      text-decoration: underline;
    }
  }

  &.inherit:not(.has-icon) {
    text-decoration: underline;

    &:hover,
    &:active {
      text-decoration: none;
    }
  }
}

Remove blue ouline when clicking on a Link with element='button'
Remove blue ouline when clicking on a Link with element='button'
