/*
Recognition

A callout (often legal or obligatory) of recognition for an entity.

> __⚠️ Warning__: Incompatible on a Bootstrap column element. You can use this pattern *within* a column instead.

.c-recognition--style-dark  - A dark background and light text
.c-recognition--style-light - A light background and dark text

Markup:
<aside class="c-recognition {{modifier_class}}">
  <h3>Citation</h3>
  <p>Teams who have NSF Petascale Computational Resource (PRAC) Awards should also acknowledge those awards.</p>
  <p><em>Dan Stanzione, John West, R. Todd Evans, Tommy Minyard, Omar Ghattas, and Dhabaleswar K. Panda. 2020. Frontera: The Evolution of Leadership Computing at the National Science Foundation. In Practice and Experience in Advanced Research Computing (PEARC ’20), July 26–30, 2020, Portland, OR, USA. ACM, New York, NY, USA, 11 pages. https://doi.org/ 10.1145/3311790.3396656</em></p>
</aside>

Styleguide Components.Recognition
*/





/* Block */

.c-recognition {
  font-size: var(--global-font-size--small);
}

/* Overwrite Bootstrap padding but restore it with margin of same dimensions */
/* NOTE: Ignore Bootstrap `ml-`/`mr-` class cuz they override w/ `!important` */
.c-recognition {
  padding: 0 2.14em;

  /* Contain margins of children (there are other one-line solutions) */
  /* SEE: https://stackoverflow.com/q/13573653/11817077 */
  overflow: auto;
}





/* Elements */

.c-recognition h3 {
  margin-top: 0.7em;
}
.c-recognition > p:last-child {
  margin-bottom: 1.4em;
}





/* Modifiers */



/* Modifers: Style: Dark */

.c-recognition--style-dark {
  color: var(--global-color-primary--xx-light);
  background-color: var(--global-color-primary--xx-dark);
}
.c-recognition--style-dark h1,
.c-recognition--style-dark h2,
.c-recognition--style-dark h3,
.c-recognition--style-dark h4,
.c-recognition--style-dark h5,
.c-recognition--style-dark h6 {
  color: var(--global-color-accent--dark);
}



/* Modifers: Style: Light */

.c-recognition--style-light {
  color: var(--global-color-primary--dark);
  background-color: var(--global-color-primary--xx-light);

  border-width: var(--global-border-width--normal) 0;
  border-style: solid;
  border-color: var(--global-color-primary--xx-dark);
}
.c-recognition--style-light h1,
.c-recognition--style-light h2,
.c-recognition--style-light h3,
.c-recognition--style-light h4,
.c-recognition--style-light h5,
.c-recognition--style-light h6 {
  color: var(--global-color-primary--xx-dark);
}