.alert {
  --base-alert-bg: transparent;
  --base-alert-padding-x: 1rem;
  --base-alert-padding-y: 1rem;
  --base-alert-margin-bottom: 1rem;
  --base-alert-color: inherit;
  --base-alert-border-color: transparent;
  --base-alert-border: 2px solid var(--base-alert-border-color);
  --base-alert-border-radius: 0;
  --base-alert-link-color: inherit;
  position: relative;
  padding: var(--base-alert-padding-y) var(--base-alert-padding-x);
  margin-bottom: var(--base-alert-margin-bottom);
  color: var(--base-alert-color);
  background-color: var(--base-alert-bg);
  border: var(--base-alert-border);
  border-radius: var(--base-alert-border-radius);
}

.alert-heading {
  color: inherit;
}

.alert-link {
  font-weight: 700;
  color: var(--base-alert-link-color);
}

.alert-dismissible {
  padding-right: 3rem;
}
.alert-dismissible .btn-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  padding: 1.25rem 1rem;
}

.alert-primary {
  --base-alert-color: var(--base-primary-text-emphasis);
  --base-alert-bg: var(--base-primary-bg-subtle);
  --base-alert-border-color: var(--base-primary-border-subtle);
  --base-alert-link-color: var(--base-primary-text-emphasis);
}

.alert-secondary {
  --base-alert-color: var(--base-secondary-text-emphasis);
  --base-alert-bg: var(--base-secondary-bg-subtle);
  --base-alert-border-color: var(--base-secondary-border-subtle);
  --base-alert-link-color: var(--base-secondary-text-emphasis);
}

.alert-success {
  --base-alert-color: var(--base-success-text-emphasis);
  --base-alert-bg: var(--base-success-bg-subtle);
  --base-alert-border-color: var(--base-success-border-subtle);
  --base-alert-link-color: var(--base-success-text-emphasis);
}

.alert-info {
  --base-alert-color: var(--base-info-text-emphasis);
  --base-alert-bg: var(--base-info-bg-subtle);
  --base-alert-border-color: var(--base-info-border-subtle);
  --base-alert-link-color: var(--base-info-text-emphasis);
}

.alert-warning {
  --base-alert-color: var(--base-warning-text-emphasis);
  --base-alert-bg: var(--base-warning-bg-subtle);
  --base-alert-border-color: var(--base-warning-border-subtle);
  --base-alert-link-color: var(--base-warning-text-emphasis);
}

.alert-danger {
  --base-alert-color: var(--base-danger-text-emphasis);
  --base-alert-bg: var(--base-danger-bg-subtle);
  --base-alert-border-color: var(--base-danger-border-subtle);
  --base-alert-link-color: var(--base-danger-text-emphasis);
}

.alert-light {
  --base-alert-color: var(--base-light-text-emphasis);
  --base-alert-bg: var(--base-light-bg-subtle);
  --base-alert-border-color: var(--base-light-border-subtle);
  --base-alert-link-color: var(--base-light-text-emphasis);
}

.alert-dark {
  --base-alert-color: var(--base-dark-text-emphasis);
  --base-alert-bg: var(--base-dark-bg-subtle);
  --base-alert-border-color: var(--base-dark-border-subtle);
  --base-alert-link-color: var(--base-dark-text-emphasis);
}

.alert-default {
  --base-alert-color: var(--base-default-text-emphasis);
  --base-alert-bg: var(--base-default-bg-subtle);
  --base-alert-border-color: var(--base-default-border-subtle);
  --base-alert-link-color: var(--base-default-text-emphasis);
}

.alert-gray {
  --base-alert-color: var(--base-gray-text-emphasis);
  --base-alert-bg: var(--base-gray-bg-subtle);
  --base-alert-border-color: var(--base-gray-border-subtle);
  --base-alert-link-color: var(--base-gray-text-emphasis);
}

.alert-gray-light {
  --base-alert-color: var(--base-gray-light-text-emphasis);
  --base-alert-bg: var(--base-gray-light-bg-subtle);
  --base-alert-border-color: var(--base-gray-light-border-subtle);
  --base-alert-link-color: var(--base-gray-light-text-emphasis);
}

.alert-gray-dark {
  --base-alert-color: var(--base-gray-dark-text-emphasis);
  --base-alert-bg: var(--base-gray-dark-bg-subtle);
  --base-alert-border-color: var(--base-gray-dark-border-subtle);
  --base-alert-link-color: var(--base-gray-dark-text-emphasis);
}

.alert-primary-light {
  --base-alert-color: var(--base-primary-light-text-emphasis);
  --base-alert-bg: var(--base-primary-light-bg-subtle);
  --base-alert-border-color: var(--base-primary-light-border-subtle);
  --base-alert-link-color: var(--base-primary-light-text-emphasis);
}

.alert-primary-dark {
  --base-alert-color: var(--base-primary-dark-text-emphasis);
  --base-alert-bg: var(--base-primary-dark-bg-subtle);
  --base-alert-border-color: var(--base-primary-dark-border-subtle);
  --base-alert-link-color: var(--base-primary-dark-text-emphasis);
}

.alert-secondary-light {
  --base-alert-color: var(--base-secondary-light-text-emphasis);
  --base-alert-bg: var(--base-secondary-light-bg-subtle);
  --base-alert-border-color: var(--base-secondary-light-border-subtle);
  --base-alert-link-color: var(--base-secondary-light-text-emphasis);
}

.alert-secondary-dark {
  --base-alert-color: var(--base-secondary-dark-text-emphasis);
  --base-alert-bg: var(--base-secondary-dark-bg-subtle);
  --base-alert-border-color: var(--base-secondary-dark-border-subtle);
  --base-alert-link-color: var(--base-secondary-dark-text-emphasis);
}