/* Admonition-like 'notes'

Example usage:

    > Some text inside the example note
    {:.note.example-icon}

*/

.note { /* Base admonition class */
    color: inherit;
    font-style: inherit;
    background-color: rgba(77, 170, 221, 0.1);
    border-radius: 1rem;
    padding: 1rem 1.5rem;
    margin: 0.75rem 1.25rem;
}

@media (max-width: 719px) {
    /* On horizontally narrow screens, reduce the margin and padding */
    .note {
        padding: 0.75rem 1rem;
        margin: 0.5rem 0;
    }
}

.note > p:last-child { /* Remove margin if last tag is a paragraph */
    margin-bottom: 0;
}

.icon { /* Base class for notes with an icon (see below) */
    padding-left: 3rem;
}

/* Example icon (lightbulb) */

.note-example {
    position: relative; /* This is where the icon's absolute positioning anchors to */
}

.note-example::before {
    display: inline-block;
    position: absolute;
    left: 0.85rem;
    width: 1.5em;
    height: 1.5em;
    content: "";
    background-color: currentColor;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px%3Bheight:24px' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M12 2C8.13 2 5 5.13 5 9C5 11.38 6.19 13.47 8 14.74V17C8 17.55 8.45 18 9 18H15C15.55 18 16 17.55 16 17V14.74C17.81 13.47 19 11.38 19 9C19 5.13 15.87 2 12 2M14 13.58V16H13V11.41L14.71 9.71C15.1 9.32 15.1 8.68 14.71 8.29C14.32 7.9 13.68 7.9 13.29 8.29L12 9.59L10.71 8.29C10.32 7.9 9.68 7.9 9.29 8.29C8.9 8.68 8.9 9.32 9.29 9.71L11 11.41V16H10V13.58C8.23 12.81 7 11.05 7 9C7 6.24 9.24 4 12 4S17 6.24 17 9C17 11.05 15.77 12.81 14 13.58M9 20H15V21C15 21.55 14.55 22 14 22H10C9.45 22 9 21.55 9 21V20Z' /%3E%3C/svg%3E");
}

.note-example > p:first-of-type:not(:last-child) { /* For examples, the first paragraph is usually "Example:" */
    margin-bottom: 1rem;
}