@synergy-design-system/styles/dist/link.css

Utility classes and helpers for applications using the Synergy Design System

/**
 * @synergy-design-system/styles version 2.1.1
 * SICK Global UX Foundation
 */
/**
 * Link styles
 * @variant {small | medium | large} syn-link The size of the link
 * @boolean { false } syn-link--quiet Applies the quiet link styling
 * @boolean { false } syn-link--disabled Applies the disabled link styling
 */
.syn-link {
  /* The size of the icon */
  --syn-link-icon-size: 1em;

  /* The gap that is used when there are pre or suffix icons */
  --syn-link-icon-gap: 0.25em;

  /* The font size used for the link */
  --syn-link-font-size: 1em;

  color: var(--syn-link-color);
  display: inline;
  font-family: var(--syn-font-sans);
  font-size: var(--syn-link-font-size);
  text-decoration: underline;
  text-underline-offset: var(--syn-link-underline-outline);
}
.syn-link:has(syn-icon) {
  align-items: center;
  display: inline-flex;
  gap: var(--syn-link-icon-gap);
}
.syn-link syn-icon {
  font-size: var(--syn-link-icon-size);
}
.syn-link:not(.syn-link--disabled):hover {
  color: var(--syn-link-color-hover);
}
.syn-link:not(.syn-link--disabled):active {
  color: var(--syn-link-color-active);
}
.syn-link:not(.syn-link--disabled):focus-visible {
  border-radius: var(--syn-focus-ring-border-radius);
  outline: var(--syn-focus-ring);
  outline-offset: var(--syn-focus-ring-offset);
}
/* Overrides for smaller links */
.syn-link--small {
  --syn-link-icon-size: var(--syn-spacing-medium);
  --syn-link-icon-gap: var(--syn-spacing-2x-small);
  --syn-link-font-size: var(--syn-font-size-small);
}
/*
 * Overrides for medium links.
 */
.syn-link--medium {
  --syn-link-icon-size: var(--syn-spacing-large);
  --syn-link-icon-gap: var(--syn-spacing-x-small);
  --syn-link-font-size: var(--syn-font-size-medium);
}
.syn-link--large {
  --syn-link-icon-size: var(--syn-spacing-x-large);
  --syn-link-icon-gap: var(--syn-spacing-small);
  --syn-link-font-size: var(--syn-font-size-large);
}
/* Quite Variant of links use other colors */
.syn-link--quiet:not(.syn-link--disabled) {
  color: var(--syn-link-quiet-color);
}
.syn-link--quiet:not(.syn-link--disabled):hover {
  color: var(--syn-link-quiet-color-hover);
}
.syn-link--quiet:not(.syn-link--disabled):active {
  color: var(--syn-link-quiet-color-active);
}
/* Styling for disabled links */
.syn-link--disabled:not([href]),
a.syn-link:not([href]) {
  cursor: not-allowed;
  opacity: var(--syn-input-disabled-opacity);
}