.root {
    color: #333;
}

.icon::before {
    vertical-align: middle;
    margin-right: 8px;
}

.icon[name="success"]::before {
    icon-font: url("./icons/success.svg");
    color: #3ad0af;
}
.icon[name="waiting"]::before {
    icon-font: url("./icons/waiting.svg");
    color: #a2b0b7;
}
.icon[name="pause"]::before {
    icon-font: url("./icons/pause.svg");
    color: #ff867f;
}
.icon[name="warning"]::before {
    icon-font: url("./icons/warning.svg");
    color: #fbcc3e;
}
.icon[name="error"]::before {
    icon-font: url("./icons/error.svg");
    color: #ff867f;
}
.icon[name="mount"]::before {
    icon-font: url("./icons/mount.svg");
    color: #3ad0af;
}
.icon[name="end"]::before {
    icon-font: url("./icons/end.svg");
    color: #a2b0b7;
}
.icon[name="expire"]::before {
    icon-font: url("./icons/expire.svg");
    color: #a2b0b7;
}