@charset "UTF-8";

.alert {
    position: relative;
    padding: 0.5rem;
    hyphens: auto;
    text-align: justify;
    max-width: 80ch;
    line-height: 1.5;
}

.alert__icon.material-icons-outlined {
    width: auto;
    height: auto;
    display: flex;
    font-size: 1.5rem;
    pointer-events: none;
    align-items: baseline;
}

.alert>p {
    display: flex;
    align-items: start;
    gap: 0.5rem;
}

.alert__text {
    opacity: 0.85;
}

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

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

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

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

.alert.alert--flash .alert__icon {
    color: var(--color-alert-flash);
}

.alert__icon.material-icons-outlined {
    animation: stamp-in 0.3s ease-out forwards;
    transform-origin: center;
    display: inline-flex;
}

@keyframes stamp-in {
    0% {
        transform: scale(3);
        opacity: 0;
    }

    30% {
        transform: scale(1.2);
        opacity: 1;
    }

    60% {
        transform: scale(0.85);
    }

    100% {
        transform: scale(1);
    }
}