:root,
.tds-mode-light {
  --tds-link: var(--tds-blue-400);
  --tds-link-hover: var(--tds-blue-400);
  --tds-link-focus: var(--tds-blue-400);
  --tds-link-visited: var(--tds-blue-600);
  --tds-link-disabled: var(--tds-grey-250);

  tds-toast {
    --tds-link: var(--tds-grey-50);
    --tds-link-hover: var(--tds-blue-400);
    --tds-link-focus: var(--tds-blue-400);
    --tds-link-visited: var(--tds-blue-700);
    --tds-link-disabled: var(--tds-grey-250);
  }

  tds-banner {
    --tds-link: var(--tds-grey-950);
  }
}

.tds-mode-dark {
  --tds-link: var(--tds-blue-300);
  --tds-link-hover: var(--tds-blue-300);
  --tds-link-focus: var(--tds-blue-300);
  --tds-link-visited: var(--tds-blue-100);
  --tds-link-disabled: var(--tds-grey-500);

  tds-toast {
    --tds-link: var(--tds-grey-950);
    --tds-link-hover: var(--tds-blue-300);
    --tds-link-focus: var(--tds-blue-300);
    --tds-link-visited: var(--tds-blue-100);
    --tds-link-disabled: var(--tds-grey-500);
  }

  tds-banner {
    --tds-link: var(--tds-grey-50);
  }
}

//TODO: Consider making global nesting override css file for scenarios like this
tds-link {
  tds-icon {
    padding-bottom: 4px;
    padding-left: 5px;
  }
}