/**
 * @file overrides.css
 * Shared link-border and external-icon integration, and caller-rendered links
 * in Table Cell and Content Header.
 * Content Header plain links use the link role their panel or band inherits.
 */

/*
 * @todo WORKAROUND: behavioursoe base.css:440-446,458 sets a:link, a:visited
 * and a:active colors; delete when the theme is fixed.
 * Links in body and total cells take the module link color. Matching by
 * position under the Table's own tbody/tfoot rows, through Table Row and
 * Table Cell, outvotes the consuming theme's a:link and a:visited rules;
 * header cells in thead keep the theme's link colors. Nested components
 * (such as an Action rendered into a cell) keep their own colors.
 */
:where([data-component-id="marsal_sdc:table"]) > .marsal-table__table > :is(tbody, tfoot) > [data-component-id="marsal_sdc:table_row"] > [data-component-id="marsal_sdc:table_cell"] a:any-link:not([data-component-id], :where([data-component-id="marsal_sdc:table_cell"]) [data-component-id] *) {
  color: var(--marsal-color-link);
}

:where([data-component-id="marsal_sdc:table"]) > .marsal-table__table > :is(tbody, tfoot) > [data-component-id="marsal_sdc:table_row"] > [data-component-id="marsal_sdc:table_cell"] a:where(:any-link):not([data-component-id], :where([data-component-id="marsal_sdc:table_cell"]) [data-component-id] *) {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;

  &:is(:hover, :focus) {
    text-decoration-thickness: 2px;
  }
}

/*
 * @todo WORKAROUND: behavioursoe base.css:440-446,458 sets a:link, a:visited
 * and a:active colors; delete when the theme is fixed.
 * Plain links take the link role they inherit. Content Header's CSS gives the
 * Overlay and Split panels, and the band without a surface, the Brand roles,
 * independently of the outer Background; a selected band surface supplies its
 * own. Underlines distinguish these links from plain text. Nested component
 * roots and descendants keep their own colors and variants.
 */
:where([data-component-id="marsal_sdc:content_header"]) :is(.marsal-content-header__content, .marsal-content-header__layout > .marsal-content-header__breadcrumbs) a:any-link:not([data-component-id], :where(.marsal-content-header__content, .marsal-content-header__breadcrumbs) [data-component-id] *) {
  color: var(--marsal-color-link);
}

:where([data-component-id="marsal_sdc:content_header"]) :is(.marsal-content-header__content, .marsal-content-header__layout > .marsal-content-header__breadcrumbs) a:where(:any-link):not([data-component-id], :where(.marsal-content-header__content, .marsal-content-header__breadcrumbs) [data-component-id] *) {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;

  &:is(:hover, :focus) {
    text-decoration-thickness: 2px;
  }
}

/*
 * @todo WORKAROUND: behavioursoe base.css:448-452 adds a:hover's border
 * underline; delete when the theme is fixed. Component roots own their borders.
 * Theme-owned .more-link and .field--name-field-link pills retain their borders
 * through their equally specific, later theme rules. Focus rings are untouched.
 */
[data-component-id^="marsal_sdc:"] a:where(:not([data-component-id])):hover {
  border-bottom: 0;
}

/*
 * @todo WORKAROUND: behavioursoe base.css:914-928 fixes svg.ext/svg.mailto fill,
 * including a:hover svg.ext; delete when the theme is fixed.
 */
:is([data-component-id^="marsal_sdc:"] a, a[data-component-id^="marsal_sdc:"]):any-link svg:is(.ext, .mailto) {
  fill: currentColor;
}

/*
 * @todo WORKAROUND: behavioursoe base.css:923-931 fixes svg.ext/svg.mailto path
 * stroke, including a:hover svg.ext path; delete when the theme is fixed.
 */
:is([data-component-id^="marsal_sdc:"] a, a[data-component-id^="marsal_sdc:"]):any-link svg:is(.ext, .mailto) path {
  stroke: currentColor;
}