@mixin root-container() { ... }@mixin root-container() { 
 }

@mixin base() { ... }@mixin base() { 
  @include typography.style-as('product-text-1', 'strong');
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  min-width: unit.rem(250px);

  min-height: unit.rem(34px);
  padding: spacing.get('s2') spacing.get('s4');
  border: unit.rem(1px) solid var(--kib-sitewide-banner-border-color, #{color.get('ui-bg', '02')});
  border-radius: border.get('br02f');
  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')})
  );
  text-decoration: none;

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

    &:hover {
      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'))
      );
      text-decoration: none;
    }

    &:focus-visible {
      border-radius: unit.rem(14px);
      outline: unit.rem(2px) solid color.get('action', 'cta', 'primary', 'primary');
      outline-offset: unit.rem(2px);
      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')})
      );
    }
  }
 }