$content-color: var(
  --wds-top-banner-content-color,
  var(--wds-color-text-standard-primary, #151414)
);

.top-banner {
  background-color: var(
    --wds-top-banner-fill,
    var(--wds-color-iris-500, #e7e4fe)
  );
  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, #ffffff)),
    var(
      --wds-top-banner-shadow,
      0 8px 30px 0 rgba(19, 23, 32, 0.1),
      0 0 0 0 rgba(19, 23, 32, 0)
    );
  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));
  }

  &#{&} #{&}__content {
    color: $content-color;
  }

  &#{&}#{&} #{&}__dismiss-button,
  &#{&}#{&} #{&}__dismiss-button:active {
    color: $content-color;
  }

  @media (hover: hover) {
    &#{&}#{&} #{&}__dismiss-button:hover {
      color: $content-color;
    }
  }
}