.btn {
  background: if(
    style(--status: success): green;
    style(--status: danger): red;
    style(--status: warning): orange;
    else: gray
  );
}


.cover {

	border: 1px solid;
	margin: 1rem;
	padding: 1rem;
	
  border-color: if(
    style(--priority: high): red;
    style(--priority: medium): orange;
    else: #ccc
  );
}

.container {
  background: if(
    media(width < 500px): red;
    else: green
  );
}



.card {
  --status: attr(data-status type(<custom-ident>));
	
	border: 1px solid;
	padding:1rem;
  
  border-color: if(
    style(--status: pending): royalblue;
    style(--status: complete): seagreen;
    else: gray
  );
  
  background-color: if(
    style(--status: pending): #eff7fa;
    style(--status: complete): #f6fff6;
    else: #f7f7f7
  );
}