/* Typography Usage mixins */
:host(.hide) {
  display: none;
  visibility: hidden;
}

:host(.error) {
  background-color: var(--tds-banner-background-error);
}
:host(.error) .content {
  color: var(--tds-banner-text-error-color);
}

:host(.information) {
  background-color: var(--tds-banner-background-info);
}
:host(.information) .content {
  color: var(--tds-banner-text-info-color);
}

:host {
  display: flex;
  background-color: var(--tds-banner-background-default);
  z-index: 400;
  padding-left: 16px;
}
:host .banner-icon {
  padding-top: 16px;
  padding-right: 12px;
  color: var(--tds-banner-prefix-default-color);
}
:host .banner-icon.error {
  color: var(--tds-banner-prefix-error-color);
}
:host .banner-icon.information {
  color: var(--tds-banner-prefix-info-color);
}
:host .content {
  color: var(--tds-banner-text-color);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 16px 0;
}
:host .content.no-icon {
  padding-left: 16px;
}
:host .header-subheader {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
:host .header,
:host slot[name=header] {
  font-family: var(--headline-06-font-family);
  font-size: var(--headline-06-font-size);
  line-height: var(--headline-06-line-height);
  font-weight: var(--headline-06-font-weight);
  letter-spacing: var(--headline-06-letter-spacing);
  text-transform: var(--headline-06-text-transform);
}
:host .subheader,
:host slot[name=subheader] {
  display: block;
  font-family: var(--detail-02-font-family);
  font-size: var(--detail-02-font-size);
  line-height: var(--detail-02-line-height);
  font-weight: var(--detail-02-font-weight);
  letter-spacing: var(--detail-02-letter-spacing);
  text-transform: var(--detail-02-text-transform);
}
:host slot[name=actions]::slotted(*) {
  display: block;
  width: fit-content;
  padding-top: 12px;
}
:host .banner-close {
  color: var(--tds-banner-x-color);
}
:host .banner-close button {
  padding-right: 16px;
  padding-top: 16px;
  background-color: transparent;
  border: none;
  color: var(--tds-banner-x-color);
}
:host .banner-close button:hover {
  cursor: pointer;
}
:host .banner-close button:focus-visible {
  outline: none;
}
:host .banner-close button:focus-visible tds-icon {
  outline: 2px solid var(--component--focus-ring-color-strong);
  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
  outline-offset: 1px;
  z-index: 1;
}