.top-banner {
  background-color: var(
    --wds-top-banner-fill,
    var(--wds-color-purple-400, #d7b7fb)
  );
  border-radius: var(
    --wds-top-banner-border-radius,
    var(--wds-border-radius-400, 8px)
  );
  box-shadow:
    inset 0 0 0 1px
      var(--wds-top-banner-border-color, var(--wds-color-white, #212122)),
    var(
      --wds-top-banner-shadow,
      var(--wds-shadow-300, 0 8px 30px 0 rgba(19, 23, 32, 0.1))
    );
  gap: var(--wds-top-banner-dismiss-gap, var(--wds-space-500, 20px));
  padding-top: var(--wds-top-banner-padding-vertical, var(--wds-space-0, 0px));
  padding-bottom: var(
    --wds-top-banner-padding-vertical,
    var(--wds-space-0, 0px)
  );
  padding-inline-start: var(
    --wds-top-banner-padding-horizontal-start,
    var(--wds-space-750, 30px)
  );
  padding-inline-end: var(
    --wds-top-banner-padding-horizontal-end,
    var(--wds-space-300, 12px)
  );

  &__content-container {
    gap: var(--wds-top-banner-content-gap, var(--wds-space-300, 12px));
  }
}