:host {
  position: relative;
  box-sizing: border-box;
  font-feature-settings: "cv03", "cv04", "cv11";
}
:host *, :host *:before, :host *:after {
  box-sizing: inherit;
}

/**
 * @prop --box-shadow: The alert's box shadow.
 */
:host {
  display: contents;
  margin: 0;
}

.alert {
  position: relative;
  display: flex;
  align-items: stretch;
  background-color: var(--sl-color-white);
  box-shadow: var(--box-shadow);
  font-family: var(--sl-font-sans);
  font-size: var(--sl-font-size-small);
  font-weight: var(--sl-font-weight-normal);
  line-height: 1.6;
  color: var(--sl-color-gray-700);
  opacity: 0;
  transform: scale(0.9);
  transition: var(--sl-transition-medium) opacity ease, var(--sl-transition-medium) transform ease;
  margin: inherit;
}
.alert:not(.alert--visible) {
  position: absolute;
  width: 1px;
  height: 1px;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
}
.alert:not(.alert--neutral) {
  border: solid 1px var(--sl-color-gray-300);
  border-radius: var(--sl-border-radius-medium);
}

.alert--open {
  opacity: 1;
  transform: none;
}

.alert__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  font-size: var(--sl-font-size-large);
}
.alert__icon ::slotted(*) {
  margin-left: var(--sl-spacing-large);
}

.alert--primary {
  background-color: var(--sl-color-blue-50);
  color: var(--sl-color-blue-900);
}
.alert--primary .alert__icon {
  color: var(--sl-color-blue-700);
}

.alert--success {
  background-color: var(--sl-color-green-50);
  color: var(--sl-color-green-900);
}
.alert--success .alert__icon {
  color: var(--sl-color-green-700);
}

.alert--info {
  background-color: var(--sl-color-gray-50);
  color: var(--sl-color-gray-900);
}
.alert--info .alert__icon {
  color: var(--sl-color-gray-700);
}

.alert--warning {
  background-color: var(--sl-color-yellow-50);
  color: var(--sl-color-yellow-900);
}
.alert--warning .alert__icon {
  color: var(--sl-color-yellow-700);
}

.alert--danger {
  background-color: var(--sl-color-red-50);
  color: var(--sl-color-red-900);
}
.alert--danger .alert__icon {
  color: var(--sl-color-red-500);
}

.alert__message {
  flex: 1 1 auto;
  padding: var(--sl-spacing-large);
  overflow: hidden;
}

.alert__close {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  font-size: var(--sl-font-size-large);
  padding-right: var(--sl-spacing-medium);
}