:host {
  display: block;
  background-color: var(--alert--background-color);
  box-sizing: border-box;
  padding: var(--alert--padding);
}

:host(.alert--error) {
  background-color: var(--severity-error--background-color, var(--alert--background-color));
}

:host(.alert--info) {
  background-color: var(--severity-info--background-color, var(--alert--background-color));
}

:host(.alert--success) {
  background-color: var(--severity-success--background-color, var(--alert--background-color));
}

:host(.alert--warning) {
  background-color: var(--severity-warning--background-color, var(--alert--background-color));
}

.alert__box {
  display: flex;
  width: 100%;
  line-height: var(--alert--line-height);
}

.alert__content {
  flex: 1;
  font-size: var(--alert--font-size);
  font-weight: var(--alert--weight);
}