.dt-alert {
  --dt-alert-color: var(--dt-color-info);
  align-items: start;
  background: color-mix(in srgb, var(--dt-alert-color) 6%, var(--dt-color-surface));
  border: 1px solid color-mix(in srgb, var(--dt-alert-color) 24%, var(--dt-color-border));
  border-radius: var(--dt-radius-md);
  color: var(--dt-color-text-muted);
  display: grid;
  font-size: 0.8125rem;
  gap: 0.75rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  line-height: 1.5;
  padding: 0.875rem 1rem;
}

.dt-alert__marker {
  align-self: stretch;
  background: var(--dt-alert-color);
  border-radius: 999px;
  min-height: 1.5rem;
  width: 0.25rem;
}

.dt-alert__content strong {
  color: var(--dt-color-text);
  display: block;
  margin-bottom: 0.1875rem;
}

.dt-alert--with-icon {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.dt-alert__icon {
  align-items: center;
  color: var(--dt-alert-color);
  display: inline-flex;
  height: 1.5rem;
  justify-content: center;
  width: 1.5rem;
}

.dt-alert__icon svg {
  height: 100%;
  width: 100%;
}

.dt-alert__action {
  align-self: center;
}

.dt-alert--success { --dt-alert-color: var(--dt-color-success); }
.dt-alert--warning { --dt-alert-color: var(--dt-color-warning); }
.dt-alert--danger { --dt-alert-color: var(--dt-color-danger); }

@media (max-width: 36rem) {
  .dt-alert {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .dt-alert__action {
    grid-column: 2;
  }

  .dt-alert--with-icon {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .dt-alert--with-icon .dt-alert__action {
    grid-column: 2;
  }
}