.ds-banner {
  --banner-bg-brand: var(--bh-bg-brand-default);
  --banner-bg-brand-soft: var(--bh-bg-brand-soft);
  --banner-bg-muted: var(--bh-bg-muted);
  --banner-bg-white: var(--bh-bg-always-white);
  --banner-border-subtle: var(--bh-border-subtle);
  --banner-border-input: var(--bh-border-input);
  --banner-content-default: var(--bh-content-default);
  --banner-content-muted: var(--bh-content-muted);
  --banner-content-inverse: var(--bh-content-inverse);
  --banner-content-link: var(--bh-content-link);
  --banner-radius-control: var(--bh-control-default);
  --banner-radius-floating: var(--bh-radius-xl-10);
  --banner-space-xxs: var(--bh-space-xxs-2);
  --banner-space-xs: var(--bh-space-xs-4);
  --banner-space-md: var(--bh-space-md-8);
  --banner-space-lg: var(--bh-space-lg-10);
  --banner-space-xl: var(--bh-space-xl-12);
  --banner-space-3xl: var(--bh-space-3xl-16);
  --banner-height-slim: var(--bh-space-8xl-48);
  --banner-height-default: calc(var(--bh-space-8xl-48) + var(--bh-space-xl-12));
  --banner-height-title: calc(var(--bh-space-8xl-48) + var(--bh-space-xs-4));
  --banner-control-height: calc(var(--bh-space-6xl-32) + var(--bh-space-xs-4));
  --banner-input-width: var(--bh-input-width);
  --banner-shadow-floating: var(--shadow-component-default);
  --banner-shadow-control: var(--shadow-button-raised);

  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--banner-space-3xl);
  width: 100%;
  min-height: var(--banner-height-slim);
  height: 100%;
  padding: var(--banner-space-xl) var(--banner-space-3xl);
  border: var(--bh-space-xxxs-1) solid transparent;
  border-radius: 0;
  background: var(--banner-bg);
  color: var(--banner-fg);
  font-family: var(--bh-font-family);
  font-size: var(--bh-text-body-md-medium-font-size);
  font-style: normal;
  font-weight: var(--bh-text-body-md-medium-font-weight);
  line-height: var(--bh-text-body-md-medium-line-height);
  letter-spacing: var(--bh-text-body-md-medium-letter-spacing);
}

.ds-banner *,
.ds-banner *::before,
.ds-banner *::after {
  box-sizing: border-box;
}

.ds-banner--floating {
  border-radius: var(--banner-radius-floating);
}

.ds-banner--single-action,
.ds-banner--input {
  justify-content: space-between;
  min-height: var(--banner-height-default);
}

.ds-banner--single-action-inline {
  min-height: var(--banner-height-default);
}

.ds-banner--title-description.ds-banner--slim {
  min-height: var(--banner-height-title);
}

.ds-banner--brand {
  --banner-bg: var(--banner-bg-brand);
  --banner-fg: var(--banner-content-inverse);
  --banner-action-bg: var(--banner-bg-white);
  --banner-action-fg: var(--banner-content-default);
  --banner-link-fg: var(--banner-content-inverse);
  --banner-icon-fg: var(--banner-content-inverse);
}

.ds-banner--grey {
  --banner-bg: var(--banner-bg-muted);
  --banner-fg: var(--banner-content-default);
  --banner-action-bg: var(--banner-bg-white);
  --banner-action-fg: var(--banner-content-default);
  --banner-link-fg: var(--banner-content-link);
  --banner-icon-fg: var(--bh-content-subtle);
  border-color: var(--banner-border-subtle);
}

.ds-banner--brand-light {
  --banner-bg: var(--banner-bg-brand-soft);
  --banner-fg: var(--banner-content-default);
  --banner-action-bg: var(--banner-bg-brand);
  --banner-action-fg: var(--banner-content-inverse);
  --banner-link-fg: var(--banner-content-link);
  --banner-icon-fg: var(--banner-content-link);
}

.ds-banner--floating.ds-banner--brand.ds-banner--single-action,
.ds-banner--floating.ds-banner--brand.ds-banner--single-action-inline,
.ds-banner--floating.ds-banner--brand.ds-banner--input,
.ds-banner--floating.ds-banner--brand.ds-banner--title-description {
  box-shadow: var(--banner-shadow-floating);
}

.ds-banner__main,
.ds-banner__leading,
.ds-banner__tail,
.ds-banner__message {
  display: flex;
  align-items: center;
  min-width: 0;
}

.ds-banner__main {
  justify-content: center;
  gap: var(--banner-space-xl);
}

.ds-banner--single-action .ds-banner__main,
.ds-banner--input .ds-banner__main {
  justify-content: flex-start;
}

.ds-banner__leading {
  gap: var(--banner-space-xl);
}

.ds-banner__tail {
  flex: 0 0 auto;
  gap: var(--banner-space-3xl);
}

.ds-banner__tail--input {
  gap: var(--banner-space-md);
}

.ds-banner__tail--input .ds-banner__close {
  margin-inline-start: var(--banner-space-md);
}

.ds-banner__icon-wrap,
.ds-banner__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--banner-icon-fg);
}

.ds-banner__icon-wrap,
.ds-banner__icon {
  width: var(--bh-space-4xl-20);
  height: var(--bh-space-4xl-20);
}

.ds-banner__icon,
.ds-banner__close-icon {
  display: block;
  fill: currentColor;
}

.ds-banner__title-only,
.ds-banner__message,
.ds-banner__title,
.ds-banner__separator,
.ds-banner__description,
.ds-banner__link,
.ds-banner__action,
.ds-banner__input {
  letter-spacing: var(--bh-text-body-md-medium-letter-spacing);
  white-space: nowrap;
  word-break: break-word;
}

.ds-banner__title-only,
.ds-banner__message {
  color: var(--banner-fg);
}

.ds-banner__message {
  gap: var(--banner-space-xs);
  font-size: var(--bh-text-body-md-medium-font-size);
  line-height: var(--bh-text-body-md-medium-line-height);
}

.ds-banner__title {
  font-weight: var(--bh-font-weight-semibold);
}

.ds-banner__separator {
  font-size: var(--bh-text-body-lg-medium-font-size);
  font-weight: var(--bh-text-body-lg-medium-font-weight);
  line-height: var(--bh-text-body-lg-medium-line-height);
}

.ds-banner__description {
  font-weight: var(--bh-font-weight-regular);
}

.ds-banner__link,
.ds-banner__action,
.ds-banner__close {
  appearance: none;
  margin: 0;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--bh-text-body-md-medium-font-size);
  font-weight: var(--bh-text-body-md-medium-font-weight);
  line-height: var(--bh-text-body-md-medium-line-height);
}

.ds-banner__link {
  padding: 0;
  background: transparent;
  color: var(--banner-link-fg);
}

.ds-banner--single-action-inline .ds-banner__link,
.ds-banner__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: var(--banner-control-height);
  padding: var(--banner-space-md) var(--banner-space-xl);
  border-radius: var(--banner-radius-control);
  background: var(--banner-action-bg);
  color: var(--banner-action-fg);
  box-shadow: var(--banner-shadow-control);
}

.ds-banner--single-action-inline .ds-banner__link {
  padding-inline: var(--banner-space-xl);
}

.ds-banner__close {
  width: var(--banner-space-3xl);
  height: var(--banner-space-3xl);
  padding: 0;
  border-radius: var(--bh-radius-full);
  background: transparent;
  color: var(--banner-icon-fg);
  box-shadow: none;
}

.ds-banner__close-icon {
  width: var(--banner-space-3xl);
  height: var(--banner-space-3xl);
}

.ds-banner--slim > .ds-banner__close,
.ds-banner--single-action-inline > .ds-banner__close {
  position: absolute;
  top: 50%;
  inset-inline-end: var(--banner-space-3xl);
  transform: translateY(-50%);
}

.ds-banner__input {
  width: var(--banner-input-width);
  height: var(--banner-control-height);
  min-width: 0;
  border: var(--bh-space-xxxs-1) solid var(--banner-border-input);
  border-radius: var(--banner-radius-control);
  background: var(--banner-bg-white);
  color: var(--banner-content-default);
  padding: 0 var(--banner-space-lg);
  font-family: inherit;
  font-size: var(--bh-text-body-md-regular-font-size);
  font-weight: var(--bh-text-body-md-regular-font-weight);
  line-height: var(--bh-text-body-md-regular-line-height);
  box-shadow: var(--shadow-input);
}

.ds-banner__input::placeholder {
  color: var(--banner-content-muted);
  opacity: var(--bh-opacity-100);
}

.ds-banner__link:focus-visible,
.ds-banner__action:focus-visible,
.ds-banner__close:focus-visible,
.ds-banner__input:focus-visible {
  outline: var(--banner-space-xxs) solid var(--banner-content-link);
  outline-offset: var(--banner-space-xxs);
}

.ds-banner--rtl {
  font-family: var(--bh-font-family);
}

.ds-banner--rtl.ds-banner--title .ds-banner__title-only {
  font-size: var(--bh-text-body-2xs-medium-font-size);
  font-weight: var(--bh-text-body-2xs-medium-font-weight);
  line-height: var(--bh-text-body-2xs-medium-line-height);
  text-align: right;
}

.ds-banner--rtl .ds-banner__description {
  font-size: var(--bh-text-body-2xs-medium-font-size);
  font-weight: var(--bh-text-body-2xs-medium-font-weight);
  line-height: var(--bh-text-body-2xs-medium-line-height);
}

.ds-banner--rtl .ds-banner__title {
  text-align: right;
}
