:root {
    /*danger*/
    --tw-danger-color: #911b1b;
    --tw-danger-bg-color: rgba(254, 242, 242, 1);
    --tw-danger-icon-color: rgba(248, 113, 113, 1);

    /*success*/
    --tw-success-color: #166534;
    --tw-success-bg-color: rgba(240, 253, 244, 1);
    --tw-success-icon-color: rgba(74, 222, 128, 1);

    /*info*/
    --tw-info-color: #1d4ed8;
    --tw-info-bg-color: rgba(239, 246, 255, 1);
    --tw-info-icon-color: rgba(96, 165, 250, 1);
}

.alert {
    display: flex;
    align-items: center;
    min-height: 50px;
    box-sizing: border-box;
    padding: 16px;
    margin-top: 10px;
    margin-bottom: 25px;
    border-radius: 6px;
}

.alert .col:nth-child(1) i {
    font-size: 16px;
}

.alert .col:nth-child(2) {
    flex-grow: 1;
    margin-left: 12px;
}

.alert .col:nth-child(2) h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
}

/*danger*/
.alert.alert--danger {
    color: var(--tw-danger-color);
    background-color: var(--tw-danger-bg-color);
}

.alert.alert--danger .col:nth-child(1) i.icon {
    color: var(--tw-danger-icon-color);
}

/*success*/
.alert.alert--success {
    color: var(--tw-success-color);
    background-color: var(--tw-success-bg-color);
}

.alert.alert--success .col:nth-child(1) i.icon {
    color: var(--tw-success-icon-color);
}

/*info*/
.alert.alert--info {
    color: var(--tw-info-color);
    background-color: var(--tw-info-bg-color);
}

.alert.alert--info .col:nth-child(1) i.icon {
    color: var(--tw-info-icon-color);
}