:host {
  display: block;
}

[hidden] {
  display: none !important;
}

::slotted(*:not(:last-child)) {
  margin-top: 0.5rem;
}

::slotted(ul) {
  line-height: 1.4em;
  list-style-type: disc;
  margin: 0;
  padding: 0;
  padding-left: 20px;
}

.alert {
  font-family: var(--sc-input-font-family);
  font-weight: var(--sc-font-weight-normal);
  font-size: var(--sc-button-font-size-medium);
  line-height: var(--sc-line-height-dense);
  border-radius: var(--sc-alert-border-radius, var(--sc-border-radius-medium));
  padding: var(--sc-spacing-large);
  display: flex;
  align-items: flex-start;
}
.alert.alert--primary {
  background-color: var(--sc-color-primary-100);
  color: var(--sc-color-primary-800);
}
.alert.alert--primary .alert__title {
  color: var(--sc-color-primary-900);
}
.alert.alert--primary .alert__icon {
  color: var(--sc-color-primary-600);
}
.alert.alert--info {
  background-color: var(--sc-color-info-100);
  color: var(--sc-color-info-800);
}
.alert.alert--info .alert__title {
  color: var(--sc-color-info-900);
}
.alert.alert--danger {
  background-color: var(--sc-color-danger-100);
  color: var(--sc-color-danger-800);
}
.alert.alert--danger .alert__title {
  color: var(--sc-color-danger-900);
}
.alert.alert--danger .alert__icon {
  color: var(--sc-color-danger-600);
}
.alert.alert--danger .alert__close:hover {
  background-color: var(--sc-color-danger-200);
}
.alert.alert--warning {
  background-color: var(--sc-color-warning-100);
  color: var(--sc-color-warning-800);
}
.alert.alert--warning .alert__title {
  color: var(--sc-color-warning-900);
}
.alert.alert--warning .alert__icon {
  color: var(--sc-color-warning-600);
}
.alert.alert--warning .alert__close:hover {
  background-color: var(--sc-color-warning-200);
}
.alert.alert--success {
  background-color: var(--sc-color-success-100);
  color: var(--sc-color-success-800);
}
.alert.alert--success .alert__title {
  color: var(--sc-color-success-900);
}

.alert__icon {
  flex-shrink: 1;
  margin-right: var(--sc-spacing-medium);
}
.alert__icon svg, .alert__icon slot[name=icon] {
  width: 1em;
  height: 1em;
}

.alert__title {
  font-weight: var(--sc-font-weight-semibold);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.alert__close {
  transition: background-color var(--sc-transition-fast) ease;
  display: inline-flex;
  border-radius: var(--sc-border-radius-small);
  padding: var(--sc-spacing-x-small);
  margin-left: auto;
  cursor: pointer;
}
.alert__close svg {
  width: 1em;
  height: 1em;
}