.alert {
    position        : relative;
    display         : flex;
    background-color: #161618;
    transition      : box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    border-radius   : var(--rounded-default);
    box-shadow      : none;
    font-size       : 1rem;
    line-height     : 1.5;
    letter-spacing  : 0.01071em;
    background-color: rgb(253, 237, 237);
    padding         : 6px 16px;
    overflow        : hidden;
    margin-bottom   : 0;
    transform-style : preserve-3d;
}

.alert.error {
    color: var(--danger-color);
    background-color: rgba(var(--danger-rgb), 0.2);
}

.alert.error svg {
    color: var(--danger);
}

.alert.success {
    color: var(--success-color);
    background-color: rgba(var(--success-rgb), 0.2);
}

.alert.success svg {
    color: var(--success);
}

.alert.warning {
    color: var(--warning-color);
    background-color: rgba(var(--warning-rgb), 0.2);
}

.alert.warning svg {
    color: var(--warning);
}

.alert.info {
    color: var(--info-color);
    background-color: rgba(var(--info-rgb), 0.2);
}

.alert.info svg {
    color: var(--info);
}

.alert .alert-icon {
    display: flex;
    margin-right: 12px;
    padding: 7px 0;
    font-size: 22px;
    opacity: 0.9;
}

.alert svg {
    user-select : none;
    width       : 1.5em;
    height      : 1.5em;
    margin-right: 12px;
    display     : inline-block;
    fill        : currentColor;
    flex-shrink : 0;
    transition  : fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    font-size   : inherit;
}

.alert .alert-content {
    padding: 8px 0;
    min-width: 0;
    overflow: auto;
}