.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: #fff;
    border: 1px solid #444;
    border-radius: 3px;
    position: relative;
}
.item[role=info]{
    background: #00c0ef;
    color: #fff;
    border: 1px solid #00acd6;
}
.item[role=success]{
    background: #00a65a;
    color: #fff;
    border: 1px solid #008d4c;
}
.item[role=warnning]{
    background: #f39c12;
    color: #fff;
    border: 1px solid #e08e0b;
}
.item[role=error]{
    background: #dd4b39;
    color: #fff;
    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;
}