sl-alert::part(base) {
  border: var(--sqm-border-thickness) solid;
  border-radius: var(--sqm-border-radius-normal);
  font-family: var(--sqm-primary-font);
}

.Error::part(base) {
  color: var(--sqm-danger-color-text);
  background-color: var(--sqm-danger-color-background);
  border-color: var(--sqm-danger-color-border);
  font-size: 14px;
}

.Error #icon {
  color: var(--sqm-danger-color-icon);
  font-size: 24px;
}

.Warning::part(base) {
  color: var(--sqm-warning-color-text);
  background-color: var(--sqm-warning-color-background);
  border-color: var(--sqm-warning-color-border);
}

.Warning #icon {
  color: var(--sqm-warning-color-icon);
  font-size: 24px;
}

.Success::part(base) {
  color: var(--sqm-success-color-text);
  background-color: var(--sqm-success-color-background);
  border-color: var(--sqm-success-color-border);
}

.Success #icon {
  color: var(--sqm-success-color-icon);
  font-size: 24px;
}

.Info::part(base) {
  color: var(--sqm-informative-color-text);
  background-color: var(--sqm-informative-color-background);
  border-color: var(--sqm-informative-color-border);
}

.Info #icon {
  color: var(--sqm-informative-color-icon);
  font-size: 24px;
}

.Transparent::part(base) {
  background-color: transparent;
  border: none;
  color: var(--sqm-text);
  margin-left: -20px;
}

::slotted(*) {
  margin: 0;
}

::slotted(*[part=alert-title]) {
  font-size: 16px;
  font-weight: bold;
}

::slotted(*[part=alert-description]),
::slotted(*[part=erroralert-text]) {
  font-size: 14px;
}