<header class="header">
  <div class="header__title">
    <h1>
      <code>hsl() and hsla()</code>
    </h1>
  </div>
  <div class="header__reference">
    <ul class="reference-list">
      <li><a class="reference-list__link" href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#HSL_colors">MDN reference</a></li>
      <li><a class="reference-list__link" href="https://caniuse.com/#feat=mdn-css_properties_color_alpha">caniuse Support</a></li>
    </ul>
  </div>
</header>

<main>
  <div class="example">
    <p>
      In this example, we are declaring three CSS Custom Properties in the <code>:root</code> selector: 
    </p>
    <ol>
      <li><code>--hue</code></li>
      <li><code>--saturation</code></li>
      <li><code>--lightness</code></li>
    </ol>
    <p>
      The three CSS Custom Properties are then combined in a <code>hsl()</code> function in the order requried by its <code>h</code>, <code>s</code>, and <code>l</code> arguments. The <code>var()</code> function allows us to do this, creating a light yellow color&nbsp;(<span class="swatch"></span>). 
    </p>
    <p>
      Then, within each of the classes that are used to construct the warning banner example, we redefine the <code>--lightness</code> CSS Custom property to darken the yellow color.
    </p>

    <div class="example__demo example__demo--hsl-and-hlsa">

      <aside class="warning warning__background">
        <div class="warning__icon">
          <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
            <path d="M28 56C12.536 56 0 43.464 0 28S12.536 0 28 0s28 12.536 28 28-12.536 28-28 28zm0-7c11.598 0 21-9.402 21-21S39.598 7 28 7 7 16.402 7 28s9.402 21 21 21zm0-7a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7zm-3.5-28h7v17.5h-7V14z" fill-rule="nonzero"/>
          </svg>
        </div>
        <div class="warning__message">
          <h2 class="warning__title">Warning</h2>
          <p class="warning__body">That thing you did also did other things.</p>
        </div>
    </div>
    <p>
      Try changing <code>--hue</code>'s value in the <code>:root</code> selector in this Pen to adjust the warning banner's overall color. For example, using a value of <code>90</code> will turn everything different shades of green!
    </p>
  </div>
</main>

// Demo
:root {
  --hue: 50;
  --saturation: 100%;
  --lightness: 87%;
}

.warning__background {
  background-color: hsl(var(--hue), var(--saturation), var(--lightness));
}

.warning__icon {
  --lightness: 40%;

  fill: hsl(var(--hue), var(--saturation), var(--lightness));
}

.warning__body { 
  --lightness: 24%;

  color: hsl(var(--hue), var(--saturation), var(--lightness));
}

.warning__title {
  --lightness: 14%;

  color: hsl(var(--hue), var(--saturation), var(--lightness));
}


// Pen Setup
.example__demo--hsl-and-hlsa {
  align-items: center;
  background-color: var(--color-cinder);
  display: flex;
  flex-direction: row;
  justify-content: center; 
  min-height: 15rem;
  padding: 0;
}

.warning {
  align-items: center;
  border-radius: var(--border-radius-medium);
  display: flex;
  flex-direction: row;
  padding: 0.75rem 2rem 0.75rem 1.25rem;
}

.warning__icon {
  height: 3rem;
  width: 3rem;
}

.warning__title {
  font-size: 1.25rem;
  letter-spacing: 0.05em;
  margin: 0;
  text-transform: uppercase;
}

.warning__message {
  margin-left: 1rem;
}

.warning__body {
  margin-left: 0;
  margin-bottom: 0.25rem;
}

.swatch {
  background-color: hsl(var(--hue), var(--saturation), var(--lightness));
  border: 2px solid var(--color-cinder);
  display: inline-block;
  height: 0.8rem;
  margin-left: 0.15rem;
  margin-right: 0.15rem;
  position: relative;
    top: 1px;
  width: 0.8rem;
}