/**
 * @file
 * Eyebrow (ICORP-269): the single definition used by the envivent:ionis-eyebrow
 * SDC, the ionis_eyebrow block type and the CKEditor 5 "Eyebrow" styles.
 *
 * Tokens: components/component-styles.css (:root). Dark contexts:
 * components/theme-styles.css. Loaded after dist/css/main.css
 * (envivent.libraries.yml) and imported by wysiwyg.css (CKEditor 5).
 *
 * Specificity 0,2,1 plus last position in the cascade beats the generic
 * heading rules (.layout-container h3, .base h3, .ck.ck-content h3) without
 * !important. Only elements with the class "eyebrow" are affected.
 */
:root :is(p, h2, h3, h4).eyebrow {
  margin: 0 0 var(--eyebrow-margin-bottom);
  padding: 0;
  font-family: var(--eyebrow-font-family);
  font-size: var(--eyebrow-font-size);
  font-weight: var(--eyebrow-font-weight);
  letter-spacing: var(--eyebrow-letter-spacing);
  line-height: var(--eyebrow-line-height);
  text-transform: var(--eyebrow-text-transform);
  color: var(--eyebrow-color);
}

/* Rule off: neutralize contextual ::after rules of legacy wrappers. */
:root :is(p, h2, h3, h4).eyebrow::after {
  content: none;
}

:root :is(p, h2, h3, h4).eyebrow.eyebrow--rule {
  position: relative;
  padding-bottom: var(--eyebrow-rule-gap);
}

:root :is(p, h2, h3, h4).eyebrow.eyebrow--rule::after {
  content: "";
  position: absolute;
  top: auto;
  right: auto;
  bottom: 0;
  left: 0;
  width: var(--eyebrow-rule-width);
  max-width: none;
  height: var(--eyebrow-rule-height);
  margin: 0;
  transform: none;
  background: var(--eyebrow-rule-color);
}

/* CKEditor 5 alignment class: center the rule under centered text. */
:root :is(p, h2, h3, h4).eyebrow.eyebrow--rule.text-align-center::after {
  left: 50%;
  transform: translateX(-50%);
}