open-consul/ui/packages/consul-ui/app/components/empty-state/skin.scss

%empty-state {
  color: rgb(var(--tone-gray-500));
  background-color: rgb(var(--tone-gray-010));
}
%empty-state-header {
  border-bottom: none;
}
%empty-state-header {
  @extend %h200;
}
/* Icons */
%empty-state header::before {
  font-size: 2.6em;
  position: relative;
  top: -3px;
  float: left;
  margin-right: 10px;
}
%empty-state-anchor::before {
  margin-right: 0.5em;
  font-size: 0.9em;
}
%empty-state[class*='status-'] header::before {
  @extend %as-pseudo;
}
%empty-state header::before {
  @extend %with-alert-circle-outline-mask;
}
%empty-state.status-404 header::before {
  @extend %with-help-circle-outline-mask;
}
%empty-state.status-403 header::before {
  @extend %with-disabled-mask;
}
%empty-state li[class*='-link'] > *::after {
  @extend %as-pseudo;
  margin-left: 5px;
}
%empty-state .docs-link > *::after {
  @extend %with-docs-mask;
}
%empty-state .back-link > *::after {
  @extend %with-chevron-left-mask;
}
%empty-state .learn-link > *::after {
  @extend %with-learn-mask;
}