.marklane-callout {
    --marklane-callout-color: var(--marklane-callout-color-note, #3858e9);
    --marklane-callout-background: #eef2ff;
    --marklane-callout-border-color: #b8c7ff;

    margin: 1.25em 0;
    padding: 0.85em 1em;
    border: 1px solid var(--marklane-callout-border-color);
    border-left: 5px solid var(--marklane-callout-color);
    border-radius: 4px;
    background: var(--marklane-callout-background);
}

.marklane-callout__title {
    margin: 0 0 0.45em;
    font-weight: 700;
    color: var(--marklane-callout-color);
}

.marklane-callout > :last-child {
    margin-bottom: 0;
}

.marklane-callout-note {
    --marklane-callout-color: var(--marklane-callout-color-note, #3858e9);
}

.marklane-callout-tip {
    --marklane-callout-color: var(--marklane-callout-color-tip, #007a1c);
    --marklane-callout-background: #edf8f0;
    --marklane-callout-border-color: #abd9b5;
}

.marklane-callout-info {
    --marklane-callout-color: var(--marklane-callout-color-info, #006ba1);
    --marklane-callout-background: #edf8ff;
    --marklane-callout-border-color: #add9ed;
}

.marklane-callout-important {
    --marklane-callout-color: var(--marklane-callout-color-important, #8250df);
    --marklane-callout-background: #f6f2ff;
    --marklane-callout-border-color: #d7c4f5;
}

.marklane-callout-warning {
    --marklane-callout-color: var(--marklane-callout-color-warning, #996800);
    --marklane-callout-background: #fff8e5;
    --marklane-callout-border-color: #efd287;
}

.marklane-callout-caution {
    --marklane-callout-color: var(--marklane-callout-color-caution, #b32d2e);
    --marklane-callout-background: #fcf0f1;
    --marklane-callout-border-color: #efb5b6;
}

.marklane-callout-danger {
    --marklane-callout-color: var(--marklane-callout-color-danger, #b32d2e);
    --marklane-callout-background: #fbeaea;
    --marklane-callout-border-color: #e5a6a7;
}

@supports (color: color-mix(in srgb, red, transparent)) {
    .marklane-callout {
        --marklane-callout-background: color-mix(in srgb, var(--marklane-callout-color) 9%, transparent);
        --marklane-callout-border-color: color-mix(in srgb, var(--marklane-callout-color) 32%, transparent);
    }
}

.marklane-details {
    margin: 1.25em 0;
    overflow: hidden;
    border: 1px solid #dcdcde;
    border-radius: 4px;
    background: #fff;
}

.marklane-details__summary {
    padding: 0.75em 1em;
    font-weight: 700;
    cursor: pointer;
    background: #f6f7f7;
}

.marklane-details__content {
    padding: 0.85em 1em;
    border-top: 1px solid #dcdcde;
}

.marklane-details__content > :first-child {
    margin-top: 0;
}

.marklane-details__content > :last-child {
    margin-bottom: 0;
}