body .alert {
    padding: var(--10px) var(--15px);
    border-radius: var(--border-radius);

    .message {
        word-break: break-word;
    }
}

body > .alert {
    padding: var(--5px) var(--18px);
    min-height: var(--30px);
    max-width: var(--400px);
    height: auto;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    box-shadow: var(--dropdown-box-shadow);

    &.alert-closable {
        .message {
            width: calc(100% - var(--16px));
            float: left;
        }
    }

    .close-container {
        width: var(--16px);
        height: var(--16px);
        float: right;

        .close {
            right: var(--minus-11px);
            top: var(--minus-1px);
            position: relative;
            color: inherit;
            text-shadow: none;
            opacity: 1;
            background: transparent;
            padding: 0;
            border: 0;
            float: none;

            &:hover {
                opacity: 0.7;
            }

            > span {
                line-height: var(--16px);
            }
        }
    }
}

.alert-success {
    .alert-variant-espo(var(--state-success-bg); var(--state-success-border); var(--state-success-text));
}

.alert-info {
    .alert-variant-espo(var(--state-info-bg); var(--state-info-border); var(--state-info-text));
}

.alert-warning {
    .alert-variant-espo(var(--state-warning-bg); var(--state-warning-border); var(--state-warning-text));
}

.alert-danger {
    .alert-variant-espo(var(--state-danger-bg); var(--state-danger-border); var(--state-danger-text));
}

.alert-primary {
    .alert-variant-espo(var(--state-primary-bg); var(--state-primary-border); var(--state-primary-text));
}