/*
 * Link — the single source of the link styles.
 *
 * Set by the Angular `a[dsLink]` directive, and usable as is on a plain <a>
 * rendered outside Angular (CMS content, translation strings), so both render
 * the same:
 *
 *   <a class="ds-link" href="/cgu">Conditions générales</a>
 *   <a class="ds-link ds-link--secondary" href="/cgu">Conditions générales</a>
 *   <a class="ds-link ds-link--invert" href="/cgu">Conditions générales</a>
 *
 * The link stays inline so it wraps with the surrounding text, and inherits its
 * font. Its vertical padding brings it to the 24px minimum height without
 * changing the line it sits in. There is no disabled state on purpose: a link is
 * always reachable.
 * Plain CSS, no nesting: this file is shipped as is to non-Angular consumers.
 */
.ds-link {
  color: var(--ds-semantic-color-action-special-content-medium);
  cursor: pointer;
  border-radius: var(--ds-semantic-radius-default);
  text-decoration-line: underline;
  text-decoration-thickness: 6%;
  text-underline-position: from-font;
  text-underline-offset: 0;
  /* Inline: grows the box and the hit area to 24px, the line box stays as is. */
  padding-block: max(0px, calc((var(--ds-semantic-sizing-m) - 1lh) / 2));
  transition:
    color 200ms,
    text-underline-offset 200ms;
}

/* The underline moving away is the hover cue that still reads on a dark surface,
   where the secondary and invert colours do not change. */
.ds-link:hover {
  color: var(--ds-semantic-color-action-special-content-strong);
  text-underline-offset: 12%;
}

.ds-link:active {
  color: var(--ds-semantic-color-action-special-content-stronger);
  text-underline-offset: 0;
}

.ds-link:focus-visible {
  outline: 2px solid var(--ds-semantic-color-action-special-border-medium);
  outline-offset: 0;
}

.ds-link.ds-link--secondary,
.ds-link.ds-link--secondary:hover,
.ds-link.ds-link--secondary:active {
  color: var(--ds-semantic-color-layout-content-medium);
}

/* White text, for a dark surface. */
.ds-link.ds-link--invert,
.ds-link.ds-link--invert:hover,
.ds-link.ds-link--invert:active {
  color: var(--ds-semantic-color-layout-invert-content-medium);
}

.ds-link.ds-link--invert:focus-visible {
  outline-color: var(--ds-semantic-color-action-invert-border-medium);
}

/* Set by the directive when it renders an icon: icons and label line up on one
   row, the label wrapping inside its own box. */
.ds-link.ds-link--with-icon {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-semantic-spacing-xs);
  min-height: var(--ds-semantic-sizing-m);
  padding-block: 0;
  vertical-align: bottom;
}

@media (prefers-reduced-motion: reduce) {
  .ds-link {
    transition: none;
  }
}