* {
  box-sizing: var(--air-box-sizing, border-box);
}

:host {
  display: var(--air-alert-display, flex);
}

.alert {
  display: flex;
  position: relative;
  align-items: start;
  width: var(--air-alert-width, 100%);
  max-width: var(--air-alert-width, 100%);
  padding-top: var(--air-alert-padding-top, var(--air-spacing-03, 1rem));
  padding-right: var(--air-alert-padding-right, var(--air-spacing-03, 1rem));
  padding-bottom: var(--air-alert-padding-bottom, var(--air-spacing-03, 1rem));
  padding-left: var(--air-alert-padding-left, var(--air-spacing-03, 1rem));
  border-width: var(--air-alert-border-width, 1px);
  border-style: var(--air-alert-border-style, solid);
  border-color: var(--air-alert-border-color, currentColor);
  border-top-width: var(--air-alert-border-top-width, 8px);
  border-radius: var(--air-alert-border-radius, var(--air-border-radius, 4px));
  font-family: var(--air-alert-font-family, var(--air-body-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"));
  background: var(--air-alert-background-color, var(--air-color-white, #ffffff));
  justify-items: stretch;
}
.alert.hidden {
  display: none;
}
.alert-heading {
  display: flex;
  position: relative;
  align-items: var(--air-alert-heading-align, center);
  min-height: var(--air-alert-heading-height, 24px);
  color: var(--air-alert-heading-color, var(--air-body-bold-color, var(--air-color-eclipse, #3a3a3a)));
  font-family: var(--air-alert-heading-font-family, var(--air-body-bold-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"));
  font-size: var(--air-alert-heading-font-size, var(--air-body-bold-font-size, 1rem));
  font-weight: var(--air-alert-heading-font-weight, 600);
  line-height: var(--air-alert-heading-line-height, var(--air-body-bold-line-height, 1.5));
}
.alert-danger {
  color: var(--air-alert-color-danger, var(--air-color-valencia, #e55451));
}
.alert-warning {
  color: var(--air-alert-color-warning, var(--air-color-mustard, #ffdf52));
}
.alert-info {
  color: var(--air-alert-color-info, var(--air-color-denim, #2e71bd));
}
.alert-success {
  color: var(--air-alert-color-success, var(--air-color-fern, #5ec075));
}
.alert-text {
  color: var(--air-alert-color-text, var(--air-color-bright-gray, #545559));
}
.alert-icon {
  margin-right: var(--air-alert-icon-margin-right, 1rem);
}
.alert-close-button {
  color: var(--air-alert-close-button-color, var(--air-color-bright-gray, #545559));
  cursor: pointer;
}
.alert-close-button-wrapper {
  display: flex;
  padding-top: var(--air-alert-close-button-padding-top, 0);
  padding-right: var(--air-alert-close-button-padding-right, 0);
  padding-bottom: var(--air-alert-close-button-padding-bottom, 0);
  padding-left: var(--air-alert-close-button-padding-left, 8px);
  align-self: flex-start;
  max-height: var(--air-alert-heading-height, 24px);
}
.alert-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  width: 100%;
  color: var(--air-alert-content-color, var(--air-color-bright-gray, #545559));
}

@media (max-width: 992px) {
  .alert {
    border-top-width: var(--air-mobile-alert-border-top-width, 4px);
  }
  .alert-icon {
    margin-right: var(--air-mobile-alert-icon-margin-right, 8px);
  }
}