@import '../base/components/stats-card/index'; .healthchecked-resource > div { @extend %stats-card; } %stats-card-icon { @extend %tooltip-below; } %stats-card-icon:first-child::before { @extend %tooltip-left; } %stats-card-icon:last-child::before { @extend %tooltip-right; } %stats-card-icon:last-child { @extend %with-star-icon; } %stats-card header > .zero { @extend %with-minus-square-fill-color-icon; color: $gray-400; } %stats-card header > .non-zero { @extend %with-check-circle-fill-color-icon; color: $green-500; } %stats-card li a > :first-child { font-size: 0; height: 16px; min-width: 16px; } [data-tooltip] { @extend %with-pseudo-tooltip; } %stats-card li a > :last-child { margin-left: 10px; } %stats-card a > :first-child::before { left: -10px; } %stats-card a.passing > :first-child { @extend %with-check-circle-fill-color-icon; } %stats-card a.warning > :first-child { @extend %with-alert-triangle-color-icon; } %stats-card a.critical > :first-child { @extend %with-cancel-square-fill-color-icon; }