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

.google-preview {
  display: flex;
  flex-direction: column;
  padding: 18px;
  border: solid var(--wds-border-width-100, 1px)
    var(--wds-color-border-dark-secondary, var(--wsr-color-D60, #dfe5eb));
  background-color: var(
    --wds-google-preview-surface-fill,
    var(--wds-color-white, var(--wsr-color-D80, #ffffff))
  );
  box-sizing: border-box;

  &--transparent {
    border-color: transparent;
    background-color: transparent;
  }

  /* the root is repeated three times on every text slot below to reach
     (0,4,0); Text's own `size`+`weight` typography rules are (0,3,0) and take
     over the font if a repeat is dropped */
  &#{&}#{&} &__title {
    color: var(--wds-google-preview-title-fill, #260aa8);
    font-family: Arial;
    font-weight: 400;
    font-size: 18px;
    line-height: 21px;
    margin-bottom: 3px;
  }

  &#{&}#{&} &__url {
    color: $text-fill;
    font-family: Arial;
    font-size: 9px;
    line-height: 10px;
  }

  &#{&}#{&} &__description {
    color: $text-fill;
    font-family: Arial;
    font-size: 12px;
    line-height: 14px;
  }

  &#{&}#{&} &__site-name {
    color: var(--wds-google-preview-site-name-fill, #202124);
    font-family: Arial;
    font-weight: 400;
    font-size: 10px;
    line-height: 11px;
    margin-bottom: 3px;
  }

  & &__website-info {
    display: flex;
    margin-bottom: 3px;
    max-width: 90%;
  }

  & &__website-info-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    max-width: 100%;
  }

  & &__website-info-cta {
    border: none;
    background: none;
    padding: 0;
  }

  & &__favicon-box {
    display: flex;
    background-color: var(--wds-google-preview-favicon-background-fill, #f1f3f4);
    border: 1px solid var(--wds-google-preview-favicon-border-fill, #e6e6e6);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    justify-content: center;
    align-items: center;
    margin-right: 6px;
    flex-shrink: 0;
  }
}