@cbpds/web-components/dist/collection/components/cbp-link/cbp-link.css

Web components for the CBP Design System.

/* 
 * Caution: "global styles" get injected into every component and can cause file size bloat.
 * These should only include SASS variables and mixins that are not written out to CSS directly
 */
/**
* @prop --cbp-link-color: var(--cbp-color-interactive-primary-dark);
* @prop --cbp-link-color-dark: var(--cbp-color-interactive-primary-light);
* @prop --cbp-link-color-visited: var(--cbp-color-interactive-visited-dark);
* @prop --cbp-link-color-visited-dark: var(--cbp-color-interactive-visited-light);
* @prop --cbp-link-color-hover: var(--cbp-color-interactive-primary-darker);
* @prop --cbp-link-color-hover-dark: var(--cbp-color-interactive-primary-lighter);
* @prop --cbp-link-color-focus: var(--cbp-color-interactive-focus-dark);
* @prop --cbp-link-color-focus-dark: var(--cbp-color-interactive-focus-light);
* @prop --cbp-link-color-active: var(--cbp-color-interactive-focus-dark);
* @prop --cbp-link-color-active-dark: var(--cbp-color-interactive-focus-light);
* @prop --cbp-link-color-outline-focus: var(--cbp-color-interactive-focus-dark);
* @prop --cbp-link-color-outline-focus-dark: var(--cbp-color-interactive-focus-light);
* @prop --cbp-link-color-disabled: var(--cbp-color-interactive-disabled-dark);
* @prop --cbp-link-color-disabled-dark: var(--cbp-color-interactive-disabled-light);
* @prop --cbp-link-gap: var(--cbp-space-1x);
* @prop --cbp-link-gap-lg: 0 var(--cbp-space-2x);
*/
:root {
  --cbp-link-color: var(--cbp-color-interactive-primary-dark);
  --cbp-link-color-dark: var(--cbp-color-interactive-primary-light);
  --cbp-link-color-visited: var(--cbp-color-interactive-visited-dark);
  --cbp-link-color-visited-dark: var(--cbp-color-interactive-visited-light);
  --cbp-link-color-hover: var(--cbp-color-interactive-primary-darker);
  --cbp-link-color-hover-dark: var(--cbp-color-interactive-primary-lighter);
  --cbp-link-color-focus: var(--cbp-color-interactive-focus-dark);
  --cbp-link-color-focus-dark: var(--cbp-color-interactive-focus-light);
  --cbp-link-color-active: var(--cbp-color-interactive-focus-dark);
  --cbp-link-color-active-dark: var(--cbp-color-interactive-focus-light);
  --cbp-link-color-outline-focus: var(--cbp-color-interactive-focus-dark);
  --cbp-link-color-outline-focus-dark: var(--cbp-color-interactive-focus-light);
  --cbp-link-color-disabled: var(--cbp-color-interactive-disabled-dark);
  --cbp-link-color-disabled-dark: var(--cbp-color-interactive-disabled-light);
  --cbp-link-gap: 0 var(--cbp-space-1x);
  --cbp-link-gap-lg: 0 var(--cbp-space-2x);
}

[data-cbp-theme=light] cbp-link[context*=dark],
[data-cbp-theme=dark] cbp-link:not([context=dark-inverts]):not([context=light-always]) {
  --cbp-link-color: var(--cbp-link-color-dark);
  --cbp-link-color-visited: var(--cbp-link-color-visited-dark);
  --cbp-link-color-hover: var(--cbp-link-color-hover-dark);
  --cbp-link-color-focus: var(--cbp-link-color-focus-dark);
  --cbp-link-color-active: var(--cbp-link-color-active-dark);
  --cbp-link-color-outline-focus: var(--cbp-link-color-outline-focus-dark);
  --cbp-link-color-disabled: var(--cbp-link-color-disabled-dark);
}

cbp-link a {
  display: inline-flex;
  align-items: baseline;
  gap: var(--cbp-link-gap);
  color: var(--cbp-link-color);
  outline-width: 0;
  outline-style: solid;
  outline-color: var(--cbp-link-color-outline-focus);
  outline-offset: var(--cbp-space-1x);
}
cbp-link a:link {
  text-decoration: underline;
}
cbp-link a:visited:not(:hover):not(:active):not(:focus) {
  color: var(--cbp-link-color-visited);
}
cbp-link a:hover {
  --cbp-link-color: var(--cbp-link-color-hover);
}
cbp-link a:focus {
  --cbp-link-color: var(--cbp-link-color-focus);
  outline-width: var(--cbp-border-size-md);
}
cbp-link a:active {
  --cbp-link-color: var(--cbp-link-color-active);
}
cbp-link a[aria-disabled=true] {
  --cbp-link-color: var(--cbp-link-color-disabled);
  font-style: italic;
  text-decoration: underline;
  cursor: not-allowed;
}