.callout {
    display: flex;
    padding: 0.75rem 1rem;
    gap: 0.5rem;
    font-family: var(--fontFamilyDefault);
    font-size: 14px;
}

.callout__body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.125rem 0px;
    flex: 1 1 0%;
}

.callout__description {
    color: var(--colorCalloutTextBody);
    line-height: 1.25rem;
}

.callout__title {
    display: flex;
    align-items: center;
    line-height: 1.25rem;
    font-weight: 600;
}

.callout__icon-container {
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;

}

.callout__icon {
    fill: currentcolor;
    display: block;
    height: 24px;
    width: 24px;
}

.callout--information {
    background: linear-gradient(90deg, var(--colorCalloutBorderInfo) 0%, var(--colorCalloutBorderInfo) 0.25rem, var(--colorCalloutBackgroundInfoDefault) 0.25rem, var(--colorCalloutBackgroundInfoDefault) 100%);
    .callout__icon-container, .callout__title {
        color: var(--colorCalloutTextInfo);
    }
}

.callout--warning {
    background: linear-gradient(90deg, var(--colorCalloutBorderWarning) 0%, var(--colorCalloutBorderWarning) 0.25rem, var(--colorCalloutBackgroundWarningDefault) 0.25rem, var(--colorCalloutBackgroundWarningDefault) 100%);
    .callout__icon-container, .callout__title {
        color: var(--colorCalloutTextWarning);
    }
}

.callout--success {
    background: linear-gradient(90deg, var(--colorCalloutBorderSuccess) 0%, var(--colorCalloutBorderSuccess) 0.25rem, var(--colorCalloutBackgroundSuccessDefault) 0.25rem, var(--colorCalloutBackgroundSuccessDefault) 100%);
    .callout__icon-container, .callout__title {
        color: var(--colorCalloutTextSuccess);
    }
}

.callout--new-feature {
    background: linear-gradient(90deg, var(--colorCalloutBorderFeature) 0%, var(--colorCalloutBorderFeature) 0.25rem, var(--colorCalloutBackgroundFeatureDefault) 0.25rem, var(--colorCalloutBackgroundFeatureDefault) 100%);
    .callout__icon-container, .callout__title {
        color: var(--colorCalloutTextFeature);
    }
}

.callout--upsell {
    background: var(--colorCalloutBorderUpsell), var(--colorCalloutBackgroundUpsell);
    background-size: 0.25rem 100%, cover;
    background-position: left top, center;
    background-repeat: no-repeat, no-repeat;
    .callout__icon-container {
        color: var(--colorCalloutIconFeature);
    }
    .callout__title {
        color: var(--colorTextPrimary);
    }
}

.callout--danger {
    background: linear-gradient(90deg, var(--colorCalloutBorderDanger) 0%, var(--colorCalloutBorderDanger) 0.25rem, var(--colorCalloutBackgroundDangerDefault) 0.25rem, var(--colorCalloutBackgroundDangerDefault) 100%);
    .callout__icon-container, .callout__title {
        color: var(--colorCalloutTextDanger);
    }
}