.mistake-type-grammatical {
    border-inline-start: 4px solid #28a745;
    padding-inline-start: 0.75rem;
}

.mistake-type-lexical {
    border-inline-start: 4px solid #ffc107;
    padding-inline-start: 0.75rem;
}

.mistake-type-stylistic {
    border-inline-start: 4px solid #fd7e14;
    padding-inline-start: 0.75rem;
}

.mistake-type-punctuation {
    border-inline-start: 4px solid #e83e8c;
    padding-inline-start: 0.75rem;
}

.mistake-type-spelling {
    border-inline-start: 4px solid #dc3545;
    padding-inline-start: 0.75rem;
}

.mistake-type-legend span {
    display: inline-block;
    margin-inline-end: 1rem;
    margin-block-end: 0.5rem;
    font-size: 0.875rem;
}

.mistake-type-legend .legend-swatch {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    margin-inline-end: 0.35rem;
    vertical-align: middle;
}