/* 
Example HTML Structure

<div class="countdown-timer">
  <h2 class="countdown-timer__heading">The virtual event will begin in:</h2>
  <div class="countdown-timer__body" data-countdown-timer="" data-end-text="It has begun">
    <p class="countdown-timer__item">
      <span class="countdown-timer__number">27</span>
      <span class="countdown-timer__label">Days</span>
    </p>
    <p class="countdown-timer__item">
      <span class="countdown-timer__number">10</span>
      <span class="countdown-timer__label">Hours</span>
    </p>
    <p class="countdown-timer__item">
      <span class="countdown-timer__number">56</span>
      <span class="countdown-timer__label">Minutes</span>
    </p>
    <p class="countdown-timer__item">
      <span class="countdown-timer__number">30</span>
      <span class="countdown-timer__label">Seconds</span>
    </p>
  </div>
</div>
*/

:root {
  /* Blue base: hsl(201, 70%, 35%) */
  /* Tan base: hsl(30, 33%, 94%) */
  
  --timer-text-color: white;
  --timer-base-color-h: 201;
  --timer-base-color-s: 70%;
  
  --timer-base-color: var(--timer-base-color-h), var(--timer-base-color-s), 35%;
  --timer-shade-color: var(--timer-base-color-h), var(--timer-base-color-s), 24%;
  --timer-highlight-color: 0, 0%, 100%;
  
  --timer-emboss-color: hsla(0, 0%, 0%, .5);
  --timer-emboss-direction: -2px;
  
  --timer-border-radius: 8px;
}


.countdown-timer {
  margin-bottom: 3rem;
}

.countdown-timer__heading {
/*   font-size: 1.5rem; */
  text-align: center;
}

.countdown-timer__body {
  display: flex;
/*   padding: 1.25rem; */
  border-radius: var(--timer-border-radius);
  text-align: center;
  font-size: 2rem; 
  max-width: 25rem;
  margin: 0 auto;
/*   box-shadow: 
    0 1px 1px hsla(var(--timer-highlight-color), 1),
    inset 0 1px 2px hsla(var(--timer-shade-color), .2); */
/*   background-image: linear-gradient(
    180deg, 
    hsla(var(--timer-shade-color), 1) 0%, 
    hsla(var(--timer-base-color), 1) 100%); */
}

.countdown-timer__body > * {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 0;
  display: flex;
  flex-direction: column;
  margin: 0 .5rem;
}

[class$="__number"]{
  color: var(--timer-text-color);
  background: hsl(var(--timer-base-color));
  padding: .875rem .25rem calc(.875rem - 4px);
  margin-bottom: .75rem;
  border-radius: var(--timer-border-radius);
  text-shadow: 0px var(--timer-emboss-direction) var(--timer-emboss-color);
  box-shadow: 
    0 -1px 0 hsla(var(--timer-highlight-color), .5),
    0 1px 2px hsla(0, 0%, 0%, .3), 
    0 2px 4px hsla(0, 0%, 0%, .3), 
    0 2px 10px hsla(var(--timer-shade-color), .3);
  background-image: linear-gradient( 
    0deg, 
    hsla(var(--timer-shade-color), 1) 0%, 
    hsla(var(--timer-base-color),1) 100%);
  font-family: monospace;
  margin-top: .5rem;
}

[class$="__label"]{
/*   color: var(--timer-text-color); */
  font-family: prenton;
  font-size: .875rem;
  text-transform: uppercase;
  display: block;
/*   text-shadow: 0px var(--timer-emboss-direction) var(--timer-emboss-color); */
}