._root_puu8f_1 {
  /* Base styles are for 'default' layout and 'info' type. */
  position: relative;
  display: flex;
  gap: var(--zds-space-16);
  align-items: flex-start;
  padding: var(--zds-space-8) var(--zds-space-16);
  font: var(--zds-body-1);
  outline: 1px solid var(--zds-ui-primary);
  outline-offset: -1px;
  border-radius: var(--zds-radius-medium);
  color: var(--zds-gray-warm-9);
  background-color: var(--zds-ui-primary-weakest);
}
._root_puu8f_1[data-variant=compact] {
  gap: var(--zds-space-8);
  padding: var(--zds-space-8);
  font: var(--zds-minimal-print-2);
  /* When no title for compact variant, reduce padding and add top padding to everything except the last child (close button).*/
}
._root_puu8f_1[data-variant=compact]:not(:has(h2)) {
  padding: var(--zds-space-6);
}
._root_puu8f_1[data-variant=compact]:not(:has(h2)) > div:nth-child(-n+2) {
  padding-top: var(--zds-space-2);
}
._root_puu8f_1[data-variant=banner], ._root_puu8f_1[data-variant=toast] {
  outline: none;
  border-radius: var(--zds-radius-none);
}
._root_puu8f_1[data-status=success] {
  background-color: var(--zds-status-success-weakest);
  outline-color: var(--zds-status-success);
}
._root_puu8f_1[data-status=warning] {
  background-color: var(--zds-status-warning-weakest);
  outline-color: var(--zds-status-warning-weaker);
}
._root_puu8f_1[data-status=error] {
  background-color: var(--zds-status-error-weakest);
  outline-color: var(--zds-status-error);
}
._root_puu8f_1[data-variant=toast] {
  background-color: var(--zds-background-weaker);
  box-shadow: var(--zds-shadow-surface);
  /* Colored vertical stripe on the left of the Alert. */
}
._root_puu8f_1[data-variant=toast]::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  border-top-left-radius: var(--zds-radius-none);
  border-bottom-left-radius: var(--zds-radius-none);
  width: 10px;
  background-color: var(--zds-ui-primary);
}
._root_puu8f_1[data-variant=toast][data-status=success]::before {
  background-color: var(--zds-status-success);
}
._root_puu8f_1[data-variant=toast][data-status=warning]::before {
  background-color: var(--zds-status-warning-weaker);
}
._root_puu8f_1[data-variant=toast][data-status=error]::before {
  background-color: var(--zds-status-error);
}

._container_puu8f_70 {
  flex: 1;
}

._status-icon_puu8f_74 {
  color: var(--zds-ui-primary-strongest);
  /* Icons are slightly darker in the 'toast' variant. */
}
._status-icon_puu8f_74[data-status=success] {
  color: var(--zds-status-success-stronger);
}
._status-icon_puu8f_74[data-status=warning] {
  color: var(--zds-status-warning-stronger);
}
._status-icon_puu8f_74[data-status=error] {
  color: var(--zds-status-error-stronger);
}
._status-icon_puu8f_74[data-variant=toast] {
  color: var(--zds-ui-primary);
}
._status-icon_puu8f_74[data-variant=toast][data-status=success] {
  color: var(--zds-status-success);
}
._status-icon_puu8f_74[data-variant=toast][data-status=warning] {
  color: var(--zds-status-warning);
}
._status-icon_puu8f_74[data-variant=toast][data-status=error] {
  color: var(--zds-status-error);
}

._title_puu8f_100 {
  display: block;
  margin: 0;
  font: var(--zds-body-3);
  color: var(--zds-text-stronger);
}
._title_puu8f_100[data-variant=compact] {
  font: var(--zds-minimal-print-3);
}

._close-button_puu8f_110 {
  position: relative;
  top: var(--zds-space-12);
  transform: translateY(-50%);
  color: var(--zds-stroke-stronger);
  outline: solid 1px transparent;
  transition: 300ms ease-in-out;
}
._close-button_puu8f_110:hover, ._close-button_puu8f_110:focus-visible {
  outline: solid 1px var(--zds-stroke-stronger);
}._root_vnrpl_1:not(:last-child) {
  margin-bottom: 10px;
}

._content_vnrpl_5 {
  /* All of the properties below this are necessary for line clamping to work. Even though the properties have 'webkit' in them, they work cross-browser. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--line-clamp);
  line-clamp: var(--line-clamp);
  overflow: hidden;
}
._content_vnrpl_5 > * {
  display: inline;
}

._toggle_vnrpl_17 {
  cursor: pointer;
  text-transform: lowercase;
  color: var(--zds-ui-primary-strongest);
}
._toggle_vnrpl_17:hover, ._toggle_vnrpl_17:focus {
  text-decoration: underline;
}._zapcard-section_10iwx_1 {
  padding: 20px;
}