@use "@infineon/design-system-tokens/dist/tokens";

a {
  color: tokens.$color-text-black;
  font-weight: 600;
  text-decoration: underline;

  &:focus {
    outline: none;
  }

  &:focus-visible:not(.btn) {
    display: inline-block;
    color: tokens.$color-highlight-600;
    background-color: #B4DDD8;
    padding: 0 4px;
    margin-left: -4px;

    & svg {
      color: tokens.$color-highlight-600;
    }
  }

  &:hover {
    color: tokens.$color-highlight-600;

    & svg {
      color: tokens.$color-highlight-600;
    }
  }

  > svg {
    width: 16px;
    height: 16px;
  }

  & .ifx {
    &__link-icon--before {
      margin-right: 8px;
    }

    &__link-icon--after {
      margin-left: 8px;
    }
  }
}

.ifx__link-color-brand {
  color: tokens.$color-highlight-500;

  &:visited {
    color: tokens.$color-highlight-600;
  }
}

.ifx {  
  &__link-underline-none {
    text-decoration: none;
  }
}