@mixin root-container() { ... }@mixin root-container() { 
  margin: spacing.get(s4) spacing.get(s4) 0 spacing.get(s4);
 }

@mixin base() { ... }@mixin base() { 
  @include typography.style-as('product-text-1', 'stronger');

  min-height: unit.rem(34px);
  min-width: unit.rem(250px);
  background: linear-gradient(
    to right,
    var(--kib-sitewide-banner-gradient-color-1, #{color.get('ui-bg', '03')}),
    var(--kib-sitewide-banner-gradient-color-2, #{color.get('ui-bg', '03')})
  );
  padding: spacing.get(s2) spacing.get(s4);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: border.get('br02f');
  border: unit.rem(1px) solid var(--kib-sitewide-banner-border-color, #{color.get('ui-bg', '02')});
  text-decoration: none;

  &.is-interactive {
    cursor: pointer;
    transition: background 0.3s ease;

    &:hover {
      text-decoration: none;
      background: linear-gradient(
        to right,
        var(--kib-sitewide-banner-hover-background, color.get('ui-bg', '21')),
        var(--kib-sitewide-banner-hover-background, color.get('ui-bg', '21'))
      );
    }

    &:focus-visible {
      outline: unit.rem(2px) solid color.get('action', 'cta', 'primary', 'primary');
      outline-offset: unit.rem(2px);
      border-radius: unit.rem(14px);
      color: var(
        --kib-sitewide-banner-font-color,
        #{color.get('text', 'static', 'light', 'primary')}
      );
      text-decoration: underline;
      text-decoration-style: solid;
      text-decoration-thickness: 13.5%;
      text-underline-offset: unit.rem(2px);
    }

    &:active {
      background: linear-gradient(
        to right,
        var(--kib-sitewide-banner-active-background, #{color.get('ui-bg', '02')}),
        var(--kib-sitewide-banner-active-background, #{color.get('ui-bg', '02')})
      );
    }
  }
 }