.data-table__status { display: flex; align-items: center; color: $core-fleet-blue; text-transform: capitalize; &:before { border-radius: 100%; content: " "; display: inline-block; margin-right: $pad-small; height: 8px; width: 8px; margin-bottom: 1px; } // host status &--online:before, &--enabled:before, &--on:before { background-color: $ui-success; } &--offline:before, &--disabled:before, &--mia:before, &--off:before { background-color: $ui-offline; } &--mia { text-transform: uppercase; } // policy status &--yes:before { padding-right: 10px; content: url(../assets/images/icon-check-circle-green-16x16@2x.png); transform: translate(-4px, -6px) scale(0.5); } &--no:before { padding-right: 8px; content: url(../assets/images/icon-action-fail-16x16@2x.png); transform: translate(-4px, -6px) scale(0.5); } &--indeterminate { color: $ui-fleet-black-50; &:before { height: 0; width: 0; margin: 0; } } // user status &--active { &:before { background-color: $ui-success; } } &--no-access { &:before { background-color: $ui-offline; } } &--invite-pending { &:before { background-color: $ui-warning; } } }