/* The unpublished-article notice from article-status.ftl. Each state has its own color and icon,
   and the text and icons meet WCAG AA contrast on their backgrounds. */
.article-status {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
  padding: 12px 16px;
  border: 1px solid;
  border-radius: 10px;
  font-size: 15px;
  line-height: 1.45;
}
.article-status .article-status-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
}
.article-status .article-status-text {
  margin: 0;
  padding: 0;
}
/* A strong rather than its own paragraph, so page rules that resize paragraphs on phones leave
   the label larger than the text */
.article-status .article-status-label {
  margin-right: 4px;
  font-size: 16px;
  font-weight: 700;
}
.article-status-deleted {
  border-color: #f3c4c4;
  background-color: #fdeeee;
  color: #7a1f1f;
}
.article-status-deleted .article-status-icon {
  color: #c62828;
}
.article-status-moderation {
  border-color: #f1d39a;
  background-color: #fff5e0;
  color: #6b4500;
}
.article-status-moderation .article-status-icon {
  color: #a05a00;
}
.article-status-draft {
  border-color: #d3dae3;
  background-color: #eef1f5;
  color: #3b4a5c;
}
.article-status-draft .article-status-label {
  color: #1f2b3a;
}
.article-status-draft .article-status-icon {
  color: #5b6b7f;
}