In this challenge, you only know the names of the existing variables. Your task is to use them to set the right properties for the elements.

The CSS rules are already in place, but they’re empty. Here are the variable and property names you’ll be working with:

background,
border-top-color,
color

--event-approved-bg
--event-approved-color
--event-declined-bg
--event-declined-color

The actual variable values are hidden on purpose, so you can’t just use regular CSS values — you have to rely on the variables!

This is an extra challenge to help you practice and strengthen your skills with CSS Custom Properties.

Solution

The solution to the challenge will be available in a few minutes. Use it if you encounter difficulties. In the meantime, try to complete the challenge on your own.

.event-approved {
  background: var(--event-approved-bg);
  border-top-color: var(--event-approved-color);
}

.event-declined {
  background: var(--event-declined-bg);
  border-top-color: var(--event-declined-color);
}

.time {
  color: var(--event-approved-color);
}

.event-declined .time {
  color: var(--event-declined-color);
}