body {
    --callout-background-color: 255, 255, 255;
    --callout-radius: 2px;
}

.callout-color1 {
    --callout-color: 108, 192, 245;
}

.callout-color2 {
    --callout-color: 109, 197, 217;
}

.callout-color3 {
    --callout-color: 113, 208, 136;
}

.callout-color4 {
    --callout-color: 160, 224, 107;
}

.callout-color5 {
    --callout-color: 238, 177, 91;
}

.callout-color6 {
    --callout-color: 234, 136, 133;
}

.callout-color7 {
    --callout-color: 230, 98, 121;
}

.callout-color8 {
    --callout-color: 152, 126, 243;
}

.callout-color9 {
    --callout-color: 182, 182, 182;
}

.callout-color-default {
    --callout-color: 129, 167, 244;
}

.has-light-background {
    --callout-background-color: 160, 160, 160;
}

blockquote {
    padding: var(--callout-content-padding);
    border-radius: var(--callout-radius);
}

.callout {
    background-color: rgba(var(--callout-background-color), 0.2);
    margin: 1em;

    &:has(.callout-content) {
        border-radius: var(--callout-radius);
        border-left: 4px solid rgb(var(--callout-color));
    }

    &:not(:has(.callout-content)) {
        border-radius: unset;

        .callout-title {
            border-left: 4px solid rgb(var(--callout-color));
            border-radius: var(--callout-radius);
        }
    }
}

.callout-title {
    padding: 10px 1em 10px 10px;
    display: flex;
    gap: 10px;
    background-color: rgba(var(--callout-color), 0.3);
}

.callout-icon {
    flex: 0 0 auto;
    display: flex;
    align-self: center;
    color: rgb(var(--callout-color));
}

.callout-title-inner {
    flex: 1 1 0;
    font-weight: 700;
}

.callout-content {
    overflow-x: auto;
    padding: 5px 15px;
}
