.security-status { margin: 0 0 5px; &__label { display: inline-block; padding: 2px 6px; white-space: nowrap; background: $success; color: $white; border-radius: 12px; position: relative; &:before { font-family: FontAwesome; } &:hover:after { content: attr(data-label); font-size: 0.5rem; @include tooltip(25px, 0px); } &--encrypted { &:before { content: "\f023"; } &--with-error { background: $attention; &:before { content: "\f023 \f057"; } } } &--not-encrypted { background: $attention; &:before { content: "\f09c"; } } &--signed { &:before { content: "\f00c"; } &--revoked, &--expired { background: $attention; &:before { content: "\f05e"; } } &--not-trusted { background: $error; &:before { content: "\f05e"; } } } &--not-signed { background: $attention; &:before { content: "\f05e"; } } } }