html:not(.vf-disable-deprecated) {
  @warn 'This variant has been deprecated, please use the --notice variant of `vf-banner';

  .vf-banner--phase {
    background-color: $vf-phase-banner-color--background;

    margin: 16px 0;

    .vf-banner__text,
    [class*='vf-text'] { // as of 1.0.4 use of vf-text is not recommended and is subject to future removal
      color: $vf-phase-banner-color--text;
      margin: 0; // makes the text have no margin so the parent component defines the spacing

      & .vf-banner__link,
      & .vf-link {
        color: $vf-banner-color--link;
      }
    }

    .vf-banner__content {
      display: flex;
    }

    .vf-button {
      @media (min-width: $vf-breakpoint--lg) {
        margin-left: auto;
      }
    }
  }
}