/* Base alert Styling */
.alert {
position: relative;
padding: 15px;
margin: 20px 0;
border-left: 5px solid;
font-family: Arial, sans-serif;
transition: border-color 0.3s, color 0.3s;
background-color: transparent;
}

/* Flexbox layout for content */
.alert-content {
display: flex;
flex-direction: column; /* Stack title and body */
}

/* Header contains icon + title on one row */
.alert-header {
display: flex;
align-items: center;
gap: 10px;
}

/* Icon Styling */
.alert-icon {
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 20px;
}

/* Light theme styles */
@media (prefers-color-scheme: light) {
.alert.note { border-color: #2196f3; }
.alert.tip { border-color: #43a047; }
.alert.important { border-color: #9c27b0; }
.alert.warning { border-color: #ff6f00; }
.alert.caution { border-color: #e53935; }

.alert.note .alert-title, .alert.note .alert-icon { color: #2196f3; }
.alert.tip .alert-title, .alert.tip .alert-icon { color: #43a047; }
.alert.important .alert-title, .alert.important .alert-icon { color: #9c27b0; }
.alert.warning .alert-title, .alert.warning .alert-icon { color: #ff6f00; }
.alert.caution .alert-title, .alert.caution .alert-icon { color: #e53935; }
}

/* Dark theme styles */
@media (prefers-color-scheme: dark) {
.alert.note { border-color: #2196f3; }
.alert.tip { border-color: #43a047; }
.alert.important { border-color: #9c27b0; }
.alert.warning { border-color: #ff6f00; }
.alert.caution { border-color: #e53935; }

.alert.note .alert-title, .alert.note .alert-icon { color: #2196f3; }
.alert.tip .alert-title, .alert.tip .alert-icon { color: #43a047; }
.alert.important .alert-title, .alert.important .alert-icon { color: #9c27b0; }
.alert.warning .alert-title, .alert.warning .alert-icon { color: #ff6f00; }
.alert.caution .alert-title, .alert.caution .alert-icon { color: #e53935; }
}

/* Icons */
.alert.note .alert-icon::before { content: "\f05a"; } /* Info icon */
.alert.tip .alert-icon::before { content: "\f0eb"; } /* Lightbulb icon */
.alert.important .alert-icon::before { content: "\f06a"; } /* Exclamation icon */
.alert.warning .alert-icon::before { content: "\f071"; } /* Warning icon */
.alert.caution .alert-icon::before { content: "\f057"; } /* Error icon */