.alert, .messages {
  --alert-padding: 1.5rem;
  --alert-close-size: 1.5rem;
  --alert-border-radius: 0.5rem;
  --alert-font-size: 1rem;
  --alert-font-family: sans-serif;
  position: relative;
  border-radius: var(--alert-border-radius);
  padding: var(--alert-padding);
  font-size: var(--alert-font-size);
  font-family: var(--alert-font-family);
}
.alert-success, .messages--status {
  background-color: #d4edda;
  border: 1px solid #27ae60;
  border-radius: var(--alert-border-radius);
}
.alert-danger, .messages--error {
  background-color: #f8d7da;
  border: 1px solid #e74c3c;
  border-radius: var(--alert-border-radius);
}
.alert-warning, .messages--warning {
  background-color: #fff3cd;
  border: 1px solid #f39c12;
  border-radius: var(--alert-border-radius);
}
.alert-info, .messages--info {
  background-color: #d1ecf1;
  border: 1px solid #3498db;
  border-radius: var(--alert-border-radius);
}
.alert-primary {
  background-color: #0073aa;
  color: #fff;
  border-color: #1e4277;
}
.alert .btn-close, .messages .btn-close {
  position: absolute;
  right: var(--alert-close-size);
  top: var(--alert-close-size);
  width: var(--alert-close-size);
  height: var(--alert-close-size);
  background-color: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  transition: opacity 0.3s ease;
}
.alert .btn-close:hover, .messages .btn-close:hover {
  opacity: 0.8;
}
.alert .btn-close:focus, .messages .btn-close:focus {
  outline: none;
  box-shadow: 0 0 0 0.25rem rgba(0, 115, 170, 0.25);
}
.alert:has(.btn-close) > div:not(.messages), .messages:has(.btn-close) > div:not(.messages) {
  padding-right: calc(var(--alert-padding) + var(--alert-close-size));
}