.yfm .yfm-note {
    max-width: 1296px;
    margin: 20px 0;
    padding: 20px 20px 20px 64px;
    border-radius: 10px;

    .yfm-note-title {
        font-weight: 700;
    }

    & > * {
        margin: 0 0 10px;

        &:first-child {
            &::before {
                box-sizing: content-box;
                display: block;
                width: 24px;
                height: 24px;
                margin-top: -2px;
                margin-left: -44px;
                padding-right: 20px;
                float: left;
            }
        }

        &:last-child {
            margin-bottom: 0;
        }
    }

    // @todo replace with variables

    $colors: (
        yfm-accent-info: #027bf3,
        yfm-accent-tip: #56bd67,
        yfm-accent-warning: #f19518,
        yfm-accent-alert: #ff4645,
    );

    @each $type, $color in $colors {
        &.#{$type} > :first-child::before {
            $r: red($color);
            $g: green($color);
            $b: blue($color);
            $rgbColor: 'rgb(' + $r + ',' + $g + ',' + $b + ')';
            content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 16 16"%3E%3Ccircle cx="8" cy="8" r="8" fill="' + $rgbColor + '"/%3E%3Crect width="1" height="5" x="7.5" y="6.5" stroke="%23fff" rx=".5"/%3E%3Ccircle cx="8" cy="4" r="1" fill="%23fff"/%3E%3C/svg%3E');
        }
    }

    $backgroundColors: (
        yfm-accent-info: var(--yfm-color-note-info-background),
        yfm-accent-tip: var(--yfm-color-note-tip-background),
        yfm-accent-alert: var(--yfm-color-note-important-background),
        yfm-accent-warning: var(--yfm-color-note-warning-background),
    );

    @each $type, $color in $backgroundColors {
        &.#{$type} {
            background: $color;
        }
    }
}