/* --------------------------------

File#: _1_drop-cap
Title: Drop Cap
Descr: Make the first letter of a paragraph larger in size
Usage: codyhouse.co/license

-------------------------------- */

/* variables */
:root {
  /* colors */
  --dj0-color-primary-hsl: 250, 84%, 54%;
  --dj0-color-bg-hsl: 0, 0%, 100%;
  --dj0-color-contrast-high-hsl: 230, 7%, 23%;
  --dj0-color-contrast-higher-hsl: 230, 13%, 9%;
}

/* component */
:root {
  --drop-cap-lines: 3;
}

.drop-cap::first-letter {
  float: left;
  font-weight: 500;
  line-height: 1;
  font-size: calc(1em * var(--drop-cap-lines) * var(--dj0-body-line-height, 1.4));
  padding: 0 0.125em 0 0;
  text-transform: uppercase;
  color: hsl(var(--dj0-color-contrast-higher-hsl));
}

.dj0-text-component .drop-cap::first-letter {
  font-size: calc(1em * var(--drop-cap-lines) * var(--dj0-body-line-height, 1.4) * var(--line-height-multiplier));
}