.container {
    font-family:Arial, Helvetica, sans-serif;
    padding: 15px;
    box-sizing: border-box;
    border-radius: 4px;
    transition: 0.2s;

    &.closed {
        transform: translateX(-999);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        position: absolute;
    }

    &.outlined-info {
        background: #e6f7ff;
        border: 1px solid #91d5ff;
    }

    &.contained-info {
        background: #1890ff;
        color: white;
    }

    &.outlined-success {
        background-color: #f6ffed;
        border: 1px solid #b7eb8f;
    }

    &.contained-success {
        background: #52c41a;
        color: white;
    }

    &.outlined-warning {
        background-color: #fffbe6;
        border: 1px solid #ffe58f;
    }

    &.contained-warning {
        background: #faad14;
        color: white;
    }

    &.outlined-error {
        background-color: #fff2f0;
        border: 1px solid #ffccc7;
    }

    &.contained-error {
        background: #ff4d4f;
        color: white;
    }
}

.icon {
    width: 1rem;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    margin-bottom: -2px;
}

.close {
    width: .9rem;
    display: inline-block;
    float: right;
    margin-top: 3px;
    opacity: .5;
    cursor: pointer;
    vertical-align: middle;
}