.Banner {
  display: flex;
  flex-direction: row;
  gap: 6px;
  align-items: flex-start;

  min-width: 200px;
  padding: 12px;

  text-align: left;

  border-radius: var(--radius-12);

  &:where(.variant-default) {
    background-color: var(--color-fill-neutral-light);

    & :where(.Content, .Icon, .Link) {
      color: var(--color-text-neutral-light);
    }
  }

  &:where(.variant-blue) {
    background-color: var(--color-fill-accent-blue);

    & :where(.Content, .Icon, .Link) {
      color: var(--color-text-accent-blue);
    }
  }

  &:where(.variant-cobalt) {
    background-color: var(--color-fill-accent-cobalt);

    & :where(.Content, .Icon, .Link) {
      color: var(--color-text-accent-cobalt);
    }
  }

  &:where(.variant-green) {
    background-color: var(--color-fill-accent-green);

    & :where(.Content, .Icon, .Link) {
      color: var(--color-text-accent-green);
    }
  }

  &:where(.variant-orange) {
    background-color: var(--color-fill-accent-orange);

    & :where(.Content, .Icon, .Link) {
      color: var(--color-text-accent-orange);
    }
  }

  &:where(.variant-red) {
    background-color: var(--color-fill-accent-red);

    & :where(.Content, .Icon, .Link) {
      color: var(--color-text-accent-red);
    }
  }

  &:where(.variant-alt) {
    background-color: var(--color-fill-grey-heavy);
    box-shadow: var(--elevation-2);

    & :where(.Content, .Link) {
      color: var(--color-text-neutral-light);
    }

    & :where(.Icon) {
      color: var(--color-text-accent-red);
    }
  }

  & + & {
    margin-top: 6px;
  }
}

.Center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.Content {
  flex: 1;
  align-self: center;
}

.Link {
  cursor: pointer;
  margin-left: 2px;
  text-decoration: underline;
}