:root {
  --alert-border-width: 2px;
  --alert-color: var(--color-midnight);
  --alert-font-size: 1.6rem;
  --alert-gap: 2rem;
  --alert-icon-size: 4rem;
  --alert-line-height: var(--line-height-body);
  --alert-padding-block: 2rem;
  --alert-padding-inline: 2rem;
  --alert-icon-color: var(--color-midnight);
  --alert-border-color: var(--color-grey-dark);
  --alert-background-color: transparent;
}

.alert {
  background-color: var(--alert-background-color);
  border: var(--alert-border-width) solid var(--alert-border-color);
  display: flex;
  gap: var(--alert-gap);
  padding-block: var(--alert-padding-block);
  padding-inline: var(--alert-padding-inline);
}

.alert--info {
  --alert-border-color: var(--color-blue-light);
  --alert-icon-color: var(--color-blue);
}

.alert--success {
  --alert-border-color: var(--color-green-light);
  --alert-icon-color: var(--color-green);
}

.alert--warning {
  --alert-border-color: var(--color-orange-light);
  --alert-icon-color: var(--color-orange);
}

.alert--error {
  --alert-border-color: var(--color-red-light);
  --alert-icon-color: var(--color-red);
}

.alert__icon {
  color: var(--alert-icon-color);
  flex-shrink: 0;
  font-size: var(--alert-icon-size);
}

.alert__text {
  align-self: center;
  color: var(--alert-color);
  font-size: var(--alert-font-size);
  line-height: var(--alert-line-height);
}