@layer components {
.alert {
  position: relative;
  padding: var(--spacing-3) var(--spacing-4);
  margin-bottom: var(--spacing-4);
  border: var(--border-width-thin) solid transparent;
  border-radius: var(--border-radius);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.alert .alert__message {
  flex: 1;
}

.alert .alert__close {
  background: none;
  border: none;
  padding: 0;
  margin-left: var(--spacing-4);
  font-size: var(--font-size-xl);
  line-height: 1;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity var(--transition-fast);
}

.alert .alert__close:hover {
  opacity: 1;
}

/* Alert variants */
.alert.alert--success {
  color: var(--success-dark);
  background-color: var(--success-light);
  border-color: var(--success-color);
}

.alert.alert--danger {
  color: var(--danger-dark);
  background-color: var(--danger-light);
  border-color: var(--danger-color);
}

.alert.alert--warning {
  color: var(--warning-dark);
  background-color: var(--warning-light);
  border-color: var(--warning-color);
}

.alert.alert--info {
  color: var(--info-dark);
  background-color: var(--info-light);
  border-color: var(--info-color);
}

/* Alert with icon */
.alert.alert--with-icon {
  padding-left: var(--spacing-10);
}

.alert.alert--with-icon::before {
  content: "";
  position: absolute;
  left: var(--spacing-4);
  top: 50%;
  transform: translateY(-50%);
  width: var(--spacing-4);
  height: var(--spacing-4);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.alert.alert--success.alert--with-icon::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23155724'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E");
}

.alert.alert--danger.alert--with-icon::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23721c24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
}

.alert.alert--warning.alert--with-icon::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23856404'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E");
}

.alert.alert--info.alert--with-icon::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230c5460'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E");
}

/* Alert animations */
@keyframes alert-fade-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.alert.alert--animated {
  animation: alert-fade-in var(--transition-normal) ease-out;
}
}