Pinned Banner — Confluence Cloud Macro

## Width
#set($width = "32em")
#if ($parameters["bannerXL"])
#set($width = "42em")
#end

## Icon and background color based on type (default: Info)
#set ($bgColor = "var(--ds-background-accent-blue-subtlest, #E9F2FF)")
#set ($iconUrl = "https://api.iconify.design/mdi/information.svg?color=%230077cc")
#set($type = $parameters["type"])

#set($typeConfig = {
    "Error" : {
        "iconUrl" : "https://api.iconify.design/mdi/alert-circle.svg?color=%23cc0000",
        "bgColor" : "var(--ds-background-accent-red-subtlest, #FFECEB)"
    },
    "Warning" : {
        "iconUrl" : "https://api.iconify.design/mdi/alert.svg?color=%23e67e22",
        "bgColor" : "var(--ds-background-accent-yellow-subtlest, #FFF7D6)"
    },
    "Info" : {
        "iconUrl" : "https://api.iconify.design/mdi/information.svg?color=%230077cc",
        "bgColor" : "var(--ds-background-accent-blue-subtlest, #E9F2FF)"
    },
    "Note" : {
        "iconUrl" : "https://api.iconify.design/mdi/note.svg?color=%23667eea",
        "bgColor" : "var(--ds-background-accent-purple-subtlest, #F3F0FF)"
    }
})

#if($typeConfig.containsKey($type)) 
    #set($bgColor = $typeConfig[$type]["bgColor"])  
    #set($iconUrl = $typeConfig[$type]["iconUrl"])
#else
    #set($type = "Info")
#end


## Position
#set($top = "-4.5%")
#set($height = "80em")

#if($parameters["position"] == "bottom-center")
    #set($top = "68%")
    #set($height = "100em")
#end

<div style="top: $top; right: 28%; height: $height; display: block; visibility: hidden; z-index: 2000;" class="aui-dialog2 aui-layer ap-stats">
    <div style="padding: 1.5em 1em 1em 1em; float: right; width: $width; background-color: $bgColor; visibility: visible; height: #if($parameters["bannerXL"])10%#else5%#end; overflow: auto; top: 8%;" class="aui-dialog2">

        <div>
            #if ($parameters["closeable"])
            <span style="float: right; height: 0;" class="aui-dialog2-header-close">
                <span class="aui-icon aui-icon-small aui-iconfont-close-dialog">Close</span>
            </span>
            #end
        </div>

        <div style="display: table;">
            <div style="display: table-cell; width: 7%; vertical-align: top;">
                <ac:image ac:width="24" ac:height="24">
                    <ri:url ri:value="$iconUrl" />
                </ac:image>
            </div>
            <div style="display: table-cell; float: left; margin-right: 2em;">
                $parameters["content"]
            </div>
        </div>

    </div>
</div>