/* Base styles for all messages */
.vanilla-alert {
    padding: 12px 20px 12px 12px;
    margin: 40px auto; /* Center the block and add top/bottom margin */
    display: flex;
    align-items: center; /* Align elements vertically */
    /* justify-content: space-between; - Commented out, flex-grow will handle this */
    width: fit-content; /* Width based on content */
    max-width: 512px; /* Maximum width */
    border: 1px solid #3f3f3f;
    border-radius: 40px; /* Make it more rounded */
    position: relative;
    font-size: 20px; /* Slightly reduce font size */
    background-color: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(16px); /* Add blur effect */
    -webkit-backdrop-filter: blur(16px); /* Prefix for Safari */
    overflow: hidden; /* For height animation to work correctly */
    gap: 16px; /* Space between icon, text and button */
    transition: opacity 0.5s ease-in-out, max-height 0.5s ease-in-out, margin 0.5s ease-in-out, padding 0.5s ease-in-out, border 0.5s ease-in-out; /* Synchronize transition with JS */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1); /* Slightly enhance shadow */
    line-height: 1.4;
}

/* Container for icon */
.vanilla-alert-icon-container {
    flex-shrink: 0; /* Prevent icon from shrinking */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px; /* Fixed width */
    height: 48px; /* Fixed height */
    border-radius: 50%; /* Make it circular */
}

/* Add colors for SVG icons */
.vanilla-alert-success .vanilla-alert-icon-container svg {
    fill: #00C624;
}

.vanilla-alert-danger .vanilla-alert-icon-container svg,
.vanilla-alert-error .vanilla-alert-icon-container svg {
    fill: #D90000;
}

.vanilla-alert-info .vanilla-alert-icon-container svg {
    fill: #007BFF;
}

.vanilla-alert-warning .vanilla-alert-icon-container svg {
    fill: #FFA500;
}

/* Container for message text */
.vanilla-alert-message {
    flex-grow: 1; /* Allow text to take available space */
    text-align: left; /* Left-align text */
}

/* Styles for different message types */

/* Success */
.vanilla-alert-success {
    background-color: rgba(0, 198, 36, 0.04);
    border: 1px solid rgba(0, 198, 36, 0.2);
}
.vanilla-alert-success .vanilla-alert-icon-container {
    /* background-color: #00c624; */
    background-color: rgba(0, 198, 36, 0.1); /* Green background for icon */
}

/* Danger / Error */
.vanilla-alert-danger,
.vanilla-alert-error { /* Combine danger and error */
    background-color: rgba(217, 0, 0, 0.04);
    border: 1px solid rgba(217, 0, 0, 0.2);
}
.vanilla-alert-danger .vanilla-alert-icon-container,
.vanilla-alert-error .vanilla-alert-icon-container {
    /* background-color: #d90000; */
    background-color: rgba(217, 0, 0, 0.1); /* Red background for icon */
}

/* Warning */
.vanilla-alert-warning {
    background-color: rgba(255, 165, 0, 0.04); /* Orange background */
    border: 1px solid rgba(255, 165, 0, 0.2);
}
.vanilla-alert-warning .vanilla-alert-icon-container {
    /* background-color: #ffa500;  */
    background-color: rgba(255, 165, 0, 0.1); /* Orange background for icon */
}

/* Info */
.vanilla-alert-info {
     background-color: rgba(0, 123, 255, 0.04); /* Blue background */
     border: 1px solid rgba(0, 123, 255, 0.2);
    /* color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb; */
}
.vanilla-alert-info .vanilla-alert-icon-container {
    /* background-color: #007bff; */
    background-color: rgba(0,123, 255, 0.1); /* Blue background for icon */
}

/* Styles for close button */
.vanilla-alert-close {
    flex-shrink: 0; /* Prevent button from shrinking */
    background: none;
    border: none;
    font-size: 20px; /* Increase button icon size */
    width: 32px; /* Fixed width */
    height: 32px; /* Fixed height */
    line-height: 1;
    color: #bdbdbd; /* Make it slightly lighter */
    opacity: 0.8;
    cursor: pointer;
    padding: 0;
    display: flex; /* Use flex for centering SVG */
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out; /* Add transition for transform */
}

.vanilla-alert-close svg {
    display: block; /* Remove extra space under SVG */
}

.vanilla-alert-close:hover,
.vanilla-alert-close:focus {
    opacity: 1;
    /* text-decoration: none; - Not needed for button */
    outline: none;
    transform: scale(1.2); /* Enlarge icon on hover */
    border-radius: 50%; /* Rounded on hover */
}