$google-preferred-source-bg: var(--google-preferred-source-bg, #fafafa);
$google-preferred-source-border-radius: var(--google-preferred-source-border-radius, 0.8rem);
$google-preferred-source-padding: var(--google-preferred-source-padding, 1.2rem);
$google-preferred-source-gap: var(--google-preferred-source-gap, 1.6rem);
$google-preferred-source-width: var(--google-preferred-source-width, 100%);
$google-preferred-source-text-color: var(--google-preferred-source-text-color, #1b1b1c);
$google-preferred-source-font-family: var(--google-preferred-source-font-family, "Plus Jakarta Sans");
$google-preferred-source-font-size: var(--google-preferred-source-font-size, 1.6rem);
$google-preferred-source-line-height: var(--google-preferred-source-line-height, 2.4rem);
$google-preferred-source-line-height-tablet: var(--google-preferred-source-line-height-tablet, 2.7rem);
$google-preferred-source-font-weight-bold: var(--google-preferred-source-font-weight-bold, 700);
$google-preferred-source-font-weight-regular: var(--google-preferred-source-font-weight-regular, 400);
$google-preferred-source-cta-width: var(--google-preferred-source-cta-width, auto);
$google-preferred-source-cta-height: var(--google-preferred-source-cta-height, auto);
$google-preferred-source-cta-max-width: var(--google-preferred-source-cta-max-width, 100%);
$google-preferred-source-cta-opacity-hover: var(--google-preferred-source-cta-opacity-hover, 0.9);
$google-preferred-source-border: var(--google-preferred-source-border, none);

.container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: $google-preferred-source-gap;
  width: $google-preferred-source-width;
  margin: 0 auto;
  padding: $google-preferred-source-padding !important;
  background: $google-preferred-source-bg;
  border-radius: $google-preferred-source-border-radius;
  box-sizing: border-box;
  border: $google-preferred-source-border;

  @include min(tablet) {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.message {
  flex: 1;
  color: $google-preferred-source-text-color;
  font-family: $google-preferred-source-font-family;
  font-size: $google-preferred-source-font-size;
  line-height: $google-preferred-source-line-height;

  @include max(mobile) {
    display: flex;
    flex-direction: column;
  }
}

.messageBold {
  font-weight: $google-preferred-source-font-weight-bold;
}

.messagePartTwo {
  font-weight: $google-preferred-source-font-weight-regular;
}

.cta {
  display: inline-block;
  text-decoration: none;
  transition: opacity 0.2s ease;

  &:hover,
  &:focus-visible {
    opacity: $google-preferred-source-cta-opacity-hover;
    text-decoration: none;
  }
}

.ctaImage {
  display: block;
  width: $google-preferred-source-cta-width;
  height: $google-preferred-source-cta-height;
  max-width: $google-preferred-source-cta-max-width;
}