.alert-container {
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: var(--alert-gap);
  padding-inline: var(--alert-container-padding-x);
  padding-block: var(--alert-container-padding-y);
}

.alert {
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: clip;
  border-radius: var(--alert-border-radius);
  border-width: var(--alert-border-width);
  border-style: var(--alert-border-style);
  border-color: var(--alert-border-color);
  background-color: var(--alert-background-color);
}

.alert-header {
  padding-inline: var(--alert-header-padding-x);
  padding-block: var(--alert-header-padding-y);
}

.alert-body {
  flex: 1 1 auto;
  padding-inline: var(--alert-body-padding-x);
  padding-block: var(--alert-body-padding-y);
}

.alert-footer {
  padding-inline: var(--alert-footer-padding-x);
  padding-block: var(--alert-footer-padding-y);
}

.alert-primary {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  color: var(--content-on-primary);
}

.alert-secondary {
  border-color: var(--color-secondary);
  background-color: var(--color-secondary);
  color: var(--content-on-secondary);
}

.alert-tertiary {
  border-color: var(--color-tertiary);
  background-color: var(--color-tertiary);
  color: var(--content-on-tertiary);
}

.alert-success {
  border-color: var(--color-success);
  background-color: var(--color-success);
  color: var(--content-on-success);
}

.alert-info {
  border-color: var(--color-info);
  background-color: var(--color-info);
  color: var(--content-on-info);
}

.alert-warning {
  border-color: var(--color-warning);
  background-color: var(--color-warning);
  color: var(--content-on-warning);
}

.alert-danger {
  border-color: var(--color-danger);
  background-color: var(--color-danger);
  color: var(--content-on-danger);
}

.alert-neutral {
  border-color: var(--color-neutral);
  background-color: var(--color-neutral);
  color: var(--content-on-neutral);
}

.alert-light {
  border-color: var(--color-light);
  background-color: var(--color-light);
  color: var(--content-on-light);
}

.alert-dark {
  border-color: var(--color-dark);
  background-color: var(--color-dark);
  color: var(--content-on-dark);
}

.alert-white {
  border-color: var(--color-white);
  background-color: var(--color-white);
  color: var(--content-on-white);
}

.alert-black {
  border-color: var(--color-black);
  background-color: var(--color-black);
  color: var(--content-on-black);
}

.alert-primary-ghost {
  border-color: var(--color-primary-ghost);
  background-color: var(--color-primary-ghost);
  color: var(--content-on-primary-ghost);
}

.alert-secondary-ghost {
  border-color: var(--color-secondary-ghost);
  background-color: var(--color-secondary-ghost);
  color: var(--content-on-secondary-ghost);
}

.alert-tertiary-ghost {
  border-color: var(--color-tertiary-ghost);
  background-color: var(--color-tertiary-ghost);
  color: var(--content-on-tertiary-ghost);
}

.alert-success-ghost {
  border-color: var(--color-success-ghost);
  background-color: var(--color-success-ghost);
  color: var(--content-on-success-ghost);
}

.alert-info-ghost {
  border-color: var(--color-info-ghost);
  background-color: var(--color-info-ghost);
  color: var(--content-on-info-ghost);
}

.alert-warning-ghost {
  border-color: var(--color-warning-ghost);
  background-color: var(--color-warning-ghost);
  color: var(--content-on-warning-ghost);
}

.alert-danger-ghost {
  border-color: var(--color-danger-ghost);
  background-color: var(--color-danger-ghost);
  color: var(--content-on-danger-ghost);
}

.alert-neutral-ghost {
  border-color: var(--color-neutral-ghost);
  background-color: var(--color-neutral-ghost);
  color: var(--content-on-neutral-ghost);
}

.alert-light-ghost {
  border-color: var(--color-light-ghost);
  background-color: var(--color-light-ghost);
  color: var(--content-on-light-ghost);
}

.alert-dark-ghost {
  border-color: var(--color-dark-ghost);
  background-color: var(--color-dark-ghost);
  color: var(--content-on-dark-ghost);
}

.alert-white-ghost {
  border-color: var(--color-white-ghost);
  background-color: var(--color-white-ghost);
  color: var(--content-on-white-ghost);
}

.alert-black-ghost {
  border-color: var(--color-black-ghost);
  background-color: var(--color-black-ghost);
  color: var(--content-on-black-ghost);
}