/* Tamanhos */
.alert-large .icon,
.alert-large .alert-title,
.alert-large .alert-message {
  font-size: var(--font-size-sm);
}

.alert-small .icon,
.alert-small .alert-title,
.alert-small .alert-message {
  font-size: var(--font-size-xs);
}

/* Estrutura com título */
.alert.with-title .alert-content {
  flex-direction: var(--flex-direction-col);
  gap: var(--spacing-xs);
}

.alert.with-title .alert-top {
  padding-top: var(--spacing-md);
}

.alert.without-title .alert-content {
  flex-direction: var(--flex-direction-row);
  align-items: var(--justify-start);
  justify-content: var(--justify-start);
  gap: var(--spacing-md);
}

.alert.without-title .alert-top {
  padding-top: var(--spacing-4);
  font-size: var(--font-base);
}

.alert.without-title .alert-message {
  padding-top: var(--spacing-md);
  padding-bottom: var(--spacing-md);
}

/* Cores por tipo */
.alert-info {
  background-color: var(--blue-50);
  color: var(--blue-900);
  border-color: var(--blue-400);
}

.alert-warning {
  background-color: var(--warning-50);
  color: var(--warning-900);
  border-color: var(--warning-400);
}

.alert-error {
  background-color: var(--error-50);
  color: var(--error-900);
  border-color: var(--error-400);
}

.alert-success {
  background-color: var(--success-50);
  color: var(--success-900);
  border-color: var(--success-400);
}

@media (max-width: 480px) {
  .alert {
    max-width: 90vw;
    box-sizing: border-box;
    padding: 0px;
  }

  .alert-content {
    padding: 0 12px;
    box-sizing: border-box;
  }

  .alert.without-title .alert-message {
    padding: var(--spacing-sm) 0;
  }
}