span {
	&.tag {
	    cursor: pointer;
	    border-radius: 4px;
	    padding: 4px 6px 4px 6px;
	    font-size: .8rem;
	    color: var(--text-on-background-color-2);
	    background: var(--button-colored-background);
	    display: inline-block;
	    user-select: none;

	    i {
	    	color: var(--text-on-background-color-2);
			margin-right: .5rem;
		}
	}
}

@each $tuple in
    'ok' #aaffad #81e27d #459442,
    'warning' #f8ffa8 #d6d949 #94972f,
    'error' #ff7d79 #ee5649 #a5302a,
    'info' #b6d2ff #85b0ee #4865a5 {
    .tag.#{nth($tuple, 1)} {
        background: #{nth($tuple, 2)};
        border: 1px solid #{nth($tuple, 3)};
        color: #{nth($tuple, 4)};
    }
}