$text-fill: var(--wds-google-preview-text-fill, #bfbfbf);

.google-preview {
  background-color: var(--wds-google-preview-surface-fill, #212122);

  /* the core's rule is `.wds-google-preview--transparent` (0,1,0), the same
     weight as the root rule above; without this repeat this sheet loads later
     and wins, and the transparent skin gets a dark background */
  &--transparent {
    border-color: transparent;
    background-color: transparent;
  }

  &#{&}#{&} &__title {
    color: var(--wds-google-preview-title-fill, #93b4e3);
  }

  &#{&}#{&} &__url {
    color: $text-fill;
  }

  &#{&}#{&} &__description {
    color: $text-fill;
  }

  &#{&}#{&} &__site-name {
    color: var(--wds-google-preview-site-name-fill, #bfbfbf);
  }

  & &__favicon-box {
    background-color: var(--wds-google-preview-favicon-background-fill, #e4eefe);
  }
}