.root {
    box-sizing: border-box;
    position: fixed;
    z-index: 1040;
    top: 10px;
    left: 10px;
    width: 320px;
}
.root[role="top-center"], .root[role="bottom-center"] {
    left: 50%;
    transform: translateX(-50%);
}
.root[role="bottom-center"], .root[role="bottom-left"], .root[role="bottom-right"] {
    top: auto;
    bottom: 10px;
}
.root[role="top-right"], .root[role="bottom-right"] {
    left: auto;
    right: 10px;
}
.root[role="top-left"], .root[role="bottom-left"] {
    left: 10px;
    right: auto;
}
.root[role="top-left"], .root[role="top-center"], .root[role="top-right"] {
    top: 10px;
    bottom: auto;
}
.root[role="static"] {
    position: static;
    width: auto;
}
.item {
    margin-bottom: 10px;
    padding: 15px;
    background: #444;
    color: white;
    border: 1px solid #444;
    border-radius: 3px;
    position: relative;
}
.item[role="info"] {
    background: #00c0ef;
    color: white;
    border: 1px solid #00acd6;
}
.item[role="success"] {
    background: #00a65a;
    color: white;
    border: 1px solid #008d4c;
}
.item[role="warning"] {
    background: #f39c12;
    color: white;
    border: 1px solid #e08e0b;
}
.item[role="error"] {
    background: #dd4b39;
    color: white;
    border: 1px solid #d73925;
}
.close {
    position: absolute;
    color: inherit;
    opacity: 0.7;
    top: 15px;
    right: 10px;
}
.close::before {
    icon-font: url("../u-icon.vue/icons/close.svg");
}
.message {
    display: inline-block;
    padding-right: 15px;
}
.root[size="auto"] {
    width: auto;
}
.root[size="small"] {
    width: 280px;
}
.root[size="normal"] {
    width: 320px;
}
.root[size="large"] {
    width: 360px;
}
.root[size="huge"] {
    width: 480px;
}