.vf-banner--alert {
  .vf-banner__content {
    align-items: center;
    display: flex;
  }
  .vf-banner__text,
  [class*='vf-text'] {
    color: currentColor;
  }
  a {
    color: currentColor;
    &:focus:focus-visible {
      outline: 1px solid var(--vf-color--grey--darkest);
    }
  }
}

.vf-banner--success {
  background-color: color(green--light);
  color: ui-color(black);
}

.vf-banner--danger {
  background-color: color(red);
  color: ui-color(white);
  a:focus:focus-visible {
    outline: 1px solid ui-color(white);
  }
}

.vf-banner--info {
  background-color: ui-color(yellow);
  color: color(grey--darkest);
}


.vf-banner--warning{
  background-color: color(orange);
  color: ui-color(black);
}


.vf-banner__button {
  display: inherit;
  margin-left: auto;

  svg {
    fill: currentColor;
    height: .75rem;
    width: .75rem;
  }

  &:focus {
    outline: 1px solid currentColor;
  }

  &:hover {
    color: inherit;
  }
}