/* Define the colors to be used for each season */
.day_preview_sidebar {
  &.OrdinaryTime {
    --season-dark: #009444;
    --season-medium: #39b54a;
    --season-light: #c4df9b;
  }
  &.Advent,
  &.Lent {
    --season-dark: #481368;
    --season-medium: #711f7e;
    --season-light: #d3bfdd;
  }
  &.Christmas,
  &.Easter {
    --season-dark: #b18a35;
    --season-medium: #d2aa41;
    --season-light: #ffe39c;
  }
}

.day_preview_sidebar {
  /* Reset inherited styles for convenience */
  &,
  & * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  margin: 0 auto;
  border: 0;
  background: var(--season-dark);
  font-weight: bold;
  text-align: left;
  cursor: auto;

  .date {
    display: flex;
    gap: 1rem;
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;

    .day_of_week {
      padding: 0.25rem 1rem;
      background: var(--season-light);
      color: var(--season-dark);
    }

    .date_month {
      padding: 0.25rem;
      color: white;
    }
  }

  .feast-header {
    margin-top: 3px;
    padding: 0.5rem 1rem;
    background: var(--season-light);

    .season {
      font-size: 1.25rem;
      letter-spacing: 0.5px;
      color: var(--season-dark);
      text-transform: uppercase;
    }

    .feast {
      margin-top: 0.15rem;
    }

    .feast,
    .feast a {
      font-size: 1rem;
      line-height: 1.25;
      color: var(--season-dark);
    }
  }

  .feast-body {
    --season-off-white: rgba(255, 255, 255, 0.9);

    padding: 1rem;
    background: var(--season-medium);
    color: var(--season-off-white);

    img {
      float: left;
      height: 105px;
      margin: 0 0.5rem 0.25rem 0.25rem;
      padding: 2px;
      background: white;
    }

    p {
      max-width: 775px;
      margin: 0;
      font-size: 13px;
      line-height: 1.4;
    }

    p + p {
      margin-top: 0.5rem;
    }

    .learn-more {
      color: var(--season-off-white);
      font-style: italic;
    }
  }

  .footer {
    padding: 0.25rem 1rem;
    background: var(--season-dark);
    text-align: right;

    a {
      color: var(--season-light);
      font-size: 1rem;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
  }
}