.note,
.important,
.warning,
.tip,
.caution {
    padding: var(--base-size-4) var(--base-size-16);
    margin-bottom: var(--base-size-16);
    color: inherit;
    border-left: .25em solid var(--borderColor-default);
    font-size: 0.9em;

    &>:first-child {
        margin-top: 0;
    }

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

    &>p {
        display: inline-block;
        font-weight: 300;
    }

    .title {
        font-family: var(--fontStack-heading);
        font-weight: var(--base-text-weight-semibold);
        margin-bottom: var(--base-size-4);

        &::before {
            content: "";
            display: inline-block;
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            margin-right: 0.3em;
            background-color: currentColor;
            mask-size: contain;
            mask-repeat: no-repeat;
            mask-position: center;
        }

        p {
            /* Hide the default text title to replace it with french */
            display: none;
        }
    }
}

.note {
    border-left-color: var(--borderColor-accent-emphasis);

    .title {
        color: var(--fgColor-accent);

        &::before {
            mask-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M0%208a8%208%200%201%201%2016%200A8%208%200%200%201%200%208Zm8-6.5a6.5%206.5%200%201%200%200%2013%206.5%206.5%200%200%200%200-13ZM6.5%207.75A.75.75%200%200%201%207.25%207h1a.75.75%200%200%201%20.75.75v2.75h.25a.75.75%200%200%201%200%201.5h-2a.75.75%200%200%201%200-1.5h.25v-2h-.25a.75.75%200%200%201-.75-.75ZM8%206a1%201%200%201%201%200-2%201%201%200%200%201%200%202Z%22/%3E%3C/svg%3E");
        }

        &::after {
            content: "Remarque";
        }
    }
}


.tip {
    border-left-color: var(--borderColor-success-emphasis);

    .title {
        color: var(--fgColor-success);

        &::before {
            mask-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M8%201.5c-2.363%200-4%201.69-4%203.75%200%20.984.424%201.625.984%202.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621%201.49a.75.75%200%200%201-1.484.211c-.04-.282-.163-.547-.37-.847a8.456%208.456%200%200%200-.542-.68c-.084-.1-.173-.205-.268-.32C3.201%207.75%202.5%206.766%202.5%205.25%202.5%202.31%204.863%200%208%200s5.5%202.31%205.5%205.25c0%201.516-.701%202.5-1.328%203.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751%200%200%201-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304%200-2.06-1.637-3.75-4-3.75ZM5.75%2012h4.5a.75.75%200%200%201%200%201.5h-4.5a.75.75%200%200%201%200-1.5ZM6%2015.25a.75.75%200%200%201%20.75-.75h2.5a.75.75%200%200%201%200%201.5h-2.5a.75.75%200%200%201-.75-.75Z%22/%3E%3C/svg%3E");
        }

        &::after {
            content: "Astuce";
        }
    }
}

.caution {
    border-left-color: var(--borderColor-danger-emphasis);

    .title {
        color: var(--fgColor-danger);

        &::before {
            mask-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M4.47.22A.749.749%200%200%201%205%200h6c.199%200%20.389.079.53.22l4.25%204.25c.141.14.22.331.22.53v6a.749.749%200%200%201-.22.53l-4.25%204.25A.749.749%200%200%201%2011%2016H5a.749.749%200%200%201-.53-.22L.22%2011.53A.749.749%200%200%201%200%2011V5c0-.199.079-.389.22-.53Zm.84%201.28L1.5%205.31v5.38l3.81%203.81h5.38l3.81-3.81V5.31L10.69%201.5ZM8%204a.75.75%200%200%201%20.75.75v3.5a.75.75%200%200%201-1.5%200v-3.5A.75.75%200%200%201%208%204Zm0%208a1%201%200%201%201%200-2%201%201%200%200%201%200%202Z%22/%3E%3C/svg%3E");
        }

        &::after {
            content: "Attention";
        }
    }
}

.important {
    border-left-color: var(--borderColor-done-emphasis);

    .title {
        color: var(--fgColor-done);

        &::before {
            mask-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M0%201.75C0%20.784.784%200%201.75%200h12.5C15.216%200%2016%20.784%2016%201.75v9.5A1.75%201.75%200%200%201%2014.25%2013H8.06l-2.573%202.573A1.458%201.458%200%200%201%203%2014.543V13H1.75A1.75%201.75%200%200%201%200%2011.25Zm1.75-.25a.25.25%200%200%200-.25.25v9.5c0%20.138.112.25.25.25h2a.75.75%200%200%201%20.75.75v2.19l2.72-2.72a.749.749%200%200%201%20.53-.22h6.5a.25.25%200%200%200%20.25-.25v-9.5a.25.25%200%200%200-.25-.25Zm7%202.25v2.5a.75.75%200%200%201-1.5%200v-2.5a.75.75%200%200%201%201.5%200ZM9%209a1%201%200%201%201-2%200%201%201%200%200%201%202%200Z%22/%3E%3C/svg%3E");
        }

        &::after {
            content: "Important";
        }

    }
}

.warning {
    .title {
        color: var(--fgColor-attention);

        &::before {
            mask-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M6.457%201.047c.659-1.234%202.427-1.234%203.086%200l6.082%2011.378A1.75%201.75%200%200%201%2014.082%2015H1.918a1.75%201.75%200%200%201-1.543-2.575Zm1.763.707a.25.25%200%200%200-.44%200L1.698%2013.132a.25.25%200%200%200%20.22.368h12.164a.25.25%200%200%200%20.22-.368Zm.53%203.996v2.5a.75.75%200%200%201-1.5%200v-2.5a.75.75%200%200%201%201.5%200ZM9%2011a1%201%200%201%201-2%200%201%201%200%200%201%202%200Z%22/%3E%3C/svg%3E");
        }

        &::after {
            content: "Avertissement";
        }
    }

    border-left-color: var(--borderColor-attention-emphasis);
}