/* =================================================================== */
/* COMPONENT:  Event Countdown Timer                                   */
/* FILE:       css/components/event-countdown.css                      */
/* USED ON:    /donate, /events                                        */
/* =================================================================== */

/* * TABLE OF CONTENTS
 * -------------------------------------------------------------------
 * 1.0 OUTER BORDER CONTAINER  (.event-countdown__border)
 * 2.0 INNER TIMER LAYOUT      (.event-countdown)
 * 3.0 TIMER BLOCKS            (.timer-block, .timer-value, .timer-label)
 * 4.0 TIMER MESSAGE           (.timer-message)
 * 5.0 COUNTDOWN STATES        ([data-countdown-state])
 * -------------------------------------------------------------------
 */

/* =================================================================== */
/* 1.0 OUTER BORDER CONTAINER                                          */
/* =================================================================== */

.event-countdown__border {
  display: flex;
  align-items: stretch;
  width: 240px;
  height: 90px;
  margin: 0 auto;
}
@media(min-width:768px){
  .event-countdown__border{
    width: 420px;
    height: 155px;
  }
}
@media(min-width:1200px){
  .event-countdown__border{
    width: 500px;
    height: 210px;
  }
}
@media(min-width:1621px){
  .event-countdown__border{
    width: 540px;
    height: 235px;
  }
}
/* =================================================================== */
/* 2.0 INNER TIMER LAYOUT                                              */
/* =================================================================== */

.event-countdown {
  flex: 1;
  border-radius: 5px;
  border: 2.191px solid #ecedf1;
  background: rgba(251, 251, 252, 0.1);
  backdrop-filter: blur(10.955px);
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  margin: 0;
  width: 100%;
}

/* =================================================================== */
/* 3.0 TIMER BLOCKS                                                    */
/* =================================================================== */

.timer-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
}

.timer-value {
  font-family: "Barlow", sans-serif;
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1;
  color: var(--Navy-Blue-100);
}

.timer-label {
  font-family: var(--font-primary), sans-serif;
  font-size: var(--fs-body);
  text-transform: uppercase;
  margin-top: 0.5rem;
  color: var(--Navy-Blue-100);
}
@media(min-width:768px){
  .timer-value{
    font-size: var(--fs-h1);
  }
  .timer-label{
    font-size: var(--fs-h6);
  }
}
@media(min-width:1200px){
  .timer-block{
    gap: 1rem;
  }
}
@media(min-width:1621px){
  .timer-block{
    gap: 1.5rem;
  }
}
/* =================================================================== */
/* 4.0 TIMER MESSAGE                                                   */
/* =================================================================== */

.timer-message {
  color: var(--Navy-Blue-100);
  font-family: "Barlow", sans-serif;
  font-weight: 800;
  text-align: center;
  padding: 1rem;
  width: 100%;
}

/* =================================================================== */
/* 5.0 COUNTDOWN STATES                                                */
/* =================================================================== */

.event-countdown__border[data-countdown-state="in-progress"] {
  /* add styles here */
}

.event-countdown__border[data-countdown-state="complete"] {
  /* add styles here */
}