.alert {
    --alert-icon-zone: 5rem;
    --alert-icon-size: calc(var(--alert-icon-zone) * 0.9);
    --alert-icon-padding: var(--space-small);
    --alert-padding: var(--space-medium);

    position: relative;

    margin-top: var(--space-small);
    margin-bottom: var(--space-large);
    padding: var(--alert-padding);
    padding-left: calc(var(--alert-icon-zone) + 2 * var(--alert-icon-padding));

    background-color: var(--color-pampas);
    border-radius: var(--radius);
}

@media (min-width: 800px) {
    .alert {
        --alert-icon-zone: 8rem;
        --alert-icon-size: calc(var(--alert-icon-zone) * 0.7);
    }
}

.alert::before {
    content: '';

    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;

    display: block;
    width: var(--alert-icon-zone);

    background-color: var(--alert-icon-background);
    background-image: var(--alert-icon-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--alert-icon-size);
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
}

.alert--info {
    --alert-icon-background: var(--color-caribbean);
    --alert-icon-image: url("../../icons/info.svg");
}

.alert--success {
    --alert-icon-background: var(--color-caribbean);
    --alert-icon-image: url("../../icons/success.svg");
}

.alert--error {
    --alert-icon-background: var(--color-danger-solid);
    --alert-icon-image: url("../../icons/error.svg");
}

.alert__title {
    font-weight: bold;
}

.alert--info .alert__title,
.alert--success .alert__title {
    color: var(--color-accent-text);
}

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

.alert__message {
    margin-top: 0;
    margin-bottom: 0;
}
