Whimper Notifications (not quite Growl notifications)

whimper.js

var whimper = {
    timers: {},
    counter: 0,

    init: function() {
        var div = document.createElement('div');
            div.id = "whimper-container";

        document.body.appendChild(div);
    },

    create: function(options) {
        let defaults = {
            message:  "",
            type:     "info",
            time:     5,
            autohide: true
        };

        if (document.getElementById("whimper-container") === null) {
            whimper.init();
        }

        var settings  = {},
        container = document.getElementById("whimper-container");

        Object.assign(settings, defaults, options);

        var notif = document.createElement('div'),
            id    = whimper.counter;

        notif.setAttribute('id', "whimper_" + id);
        notif.setAttribute('class', "whimper " + settings.type);
        notif.setAttribute('onclick', "whimper.remove(" + id + ")");
        notif.innerHTML = '<i class="icon-' + ((settings.type == "warning") ? "error" : settings.type) + '"></i><span class="message">' + settings.message + '</span>';

        container.appendChild(notif);

        if (settings.autohide === true) {
            whimper.timers[whimper.counter] = window.setTimeout(
                function() {
                    whimper.remove(id);
                },
                (settings.time * 1000)
            );
        }

        whimper.counter += 1;
    },

    remove: function(elemId) {
        var element = document.getElementById('whimper_' + elemId);
        element.parentNode.removeChild(element);

        if (whimper.timers[elemId]) {
            window.clearTimeout(whimper.timers[elemId]);
            delete whimper.timers[elemId];
        }
    }
};

whimper.scss

$success:   green;
$error:     crimson;
$info:      steelblue;
$warning:   goldenrod;

#whimper-container {
    font-size: 12px;
    position: fixed;
    bottom: 1em;
    right: 0.75em;
    width: 24em;

    .whimper {
        border: 1px solid;
        border-radius: 0.33em;
        padding: 0.75em 0.5em;
        display: block;
        position: relative;
        width: 100%;
        font-size: 1em;
        margin-top: 1em;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.33);

        &.success {
            color: $success;
            border-color: $success;
            background-color: lighten($success, 72%);
        }

        &.error {
            color: $error;
            border-color: $error;
            background-color: lighten($error, 45%);
        }

        &.warning {
            color: $warning;
            border-color: $warning;
            background-color: lighten($warning, 45%);
        }

        &.info {
            color: $info;
            border-color: $info;
            background-color: lighten($info, 40%);
        }

        i {
            display: inline-block;
            vertical-align: top;
            margin-top: 2px;
            width: 1.5em;
            font-size: 1.1666666667em;
        }

        span {
            display: inline-block;
            width: 21em;
            text-align: left;
        }
    }
}