.kb-callout {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 16px;
    margin: 16px 0;
    border-left: 3px solid;
    border-radius: 0;
}

.kb-callout__icon {
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 18px;
    line-height: 1;
    user-select: none;
}

.kb-callout__body {
    flex: 1 1 auto;
    min-width: 0;
}

.kb-callout__label,
.kb-callout__title {
    margin: 0 0 3px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.6;
}

.kb-callout__label {
    user-select: none;
}

.kb-callout__text {
    font-size: 14px;
    line-height: 1.6;
    text-align: left;
    word-wrap: break-word;
    outline: none;
}

.kb-callout__text[contenteditable="true"]:empty::before {
    content: attr(data-placeholder);
    opacity: 0.5;
}

.kb-callout--important {
    border-left-color: #EF9F27;
    background: #FCF6EA;
}

.kb-callout--important .kb-callout__label {
    color: #854F0B;
}

.kb-callout--important .kb-callout__title,
.kb-callout--important .kb-callout__text {
    color: #5C4526;
}

.kb-callout--note {
    border-left-color: #85B7EB;
    background: #F4F8FD;
}

.kb-callout--note .kb-callout__label {
    color: #0C447C;
}

.kb-callout--note .kb-callout__title,
.kb-callout--note .kb-callout__text {
    color: #3D4C59;
}

.kb-callout--tip {
    border-left-color: #5DCAA5;
    background: #F0FAF6;
}

.kb-callout--tip .kb-callout__label {
    color: #085041;
}

.kb-callout--tip .kb-callout__title,
.kb-callout--tip .kb-callout__text {
    color: #2E4A43;
}