.bee-alert {
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--alert-gap, 12px);
    width: var(--alert-width, 100%);
    max-width: 100%;
    min-height: var(--alert-min-height, 0);
    margin-inline: auto;
    padding: var(--alert-py, 16px) var(--alert-px, 18px);
    overflow-wrap: anywhere;
    color: var(--alert-text, #164e63);
    background: var(--alert-bg, #e8f6fb);
    border: var(--alert-border-width, 1px) solid var(--alert-border, #67c7df);
    border-radius: var(--alert-radius, 12px);
}
.bee-alert.style-filled {
    color: var(--alert-text, #fff);
    background: var(--alert-bg, #0891b2);
    border-color: var(--alert-bg, #0891b2);
}
.bee-alert.style-outline {
    background: transparent;
}
.bee-alert.style-accent {
    border-width: 0 0 0 max(4px, var(--alert-border-width, 1px));
    border-radius: max(2px, var(--alert-radius, 12px));
    background: var(--alert-bg, #f8fafc);
}
.bee-alert.shadow-soft {
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.09);
}
.bee-alert.shadow-medium {
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.15);
}
.bee-alert.shadow-strong {
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.23);
}
.bee-alert-icon {
    flex: 0 0 auto;
    margin-top: 0.12em;
    color: var(--alert-icon, currentColor);
    font-size: calc(var(--alert-title-size, 16px) + 3px);
    line-height: 1.2;
}
.bee-alert-content {
    flex: 1 1 auto;
    min-width: 0;
}
.bee-alert-content strong {
    display: block;
    margin: 0;
    color: inherit;
    font-size: var(--alert-title-size, 16px);
    line-height: 1.3;
}
.bee-alert-content p {
    margin: 4px 0 0 !important;
    color: inherit !important;
    font-size: var(--alert-text-size, 14px) !important;
    line-height: 1.55 !important;
}
.bee-alert-content strong:empty {
    display: none;
}
.bee-alert-content strong:empty + p {
    margin-top: 0 !important;
}
.bee-alert-close {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin: -5px -7px 0 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font:
        400 22px/1 Arial,
        sans-serif;
    cursor: pointer;
    opacity: 0.7;
}
.bee-alert-close:hover,
.bee-alert-close:focus-visible {
    background: color-mix(in srgb, currentColor 10%, transparent);
    opacity: 1;
    outline: 0;
}
.wb-nested-element .bee-alert-close {
    pointer-events: none;
}
@media (max-width: 700px) {
    .bee-alert {
        --alert-width: min(var(--alert-width, 100%), 100%);
        gap: min(var(--alert-gap, 12px), 10px);
        padding: min(var(--alert-py, 16px), 16px) min(var(--alert-px, 18px), 16px);
    }
    .bee-alert-icon {
        font-size: min(calc(var(--alert-title-size, 16px) + 3px), 22px);
    }
}