$types: (
    note:       (color: hsl(0,   0%,  94%), title-color: hsl(0,   0%,  64%), icon: ""),
    seealso:    (color: hsl(0,   0%,  94%), title-color: hsl(0,   0%,  64%), icon: ""),
    definition: (color: hsl(360, 61%, 94%), title-color: hsl(360, 61%, 64%), icon: ""),
    exampl:     (color: hsl(160, 61%, 94%), title-color: hsl(160, 61%, 64%), icon: ""),
    question:   (color: hsl(55,  61%, 94%), title-color: hsl(55,  61%, 64%), icon: ""),
    summary:    (color: hsl(204, 61%, 94%), title-color: hsl(204, 61%, 64%), icon: ""),
    hint:       (color: hsl(0,   0%,  94%), title-color: hsl(0,   0%,  64%), icon: ""),
    important:  (color: hsl(32,  61%, 94%), title-color: hsl(32,  61%, 64%), icon: ""),
    caution:    (color: hsl(32,  61%, 94%), title-color: hsl(32,  61%, 64%), icon: ""),
    warning:    (color: hsl(32,  61%, 94%), title-color: hsl(32,  61%, 64%), icon: "")
);


@each $label, $map in $types {

    .#{$label} {
        padding:12px;
        line-height:24px;
        margin-bottom:24px;
        -webkit-font-smoothing:antialiased;

        background: map-get($map, color);

        p:last-child, .last {
            margin-bottom:0;
        }


        &.admonition-title{
            line-height: 1;
            background: map-get($map, title-color);
            margin-bottom: 0px;

            &:before{
                font-family:FontAwesome;
                content: map-get($map, icon);
            }
        }
    }
}

#content .admonition-title{
    color:#fff;
    font-weight:bold;
    display:block;
    color:#fff;
    padding:6px 12px;
    margin-bottom:0px;
    font-family:inherit;
    -webkit-font-smoothing:antialiased;

    &:before{
        margin-right:4px;
        font-family:"FontAwesome";
        display:inline-block;
        font-style:normal;
        font-weight:normal;
        line-height:1;
        text-decoration:inherit;
    }
}