/*
 * Google Preferred Source — token-driven styling.
 * Themes should override the --km-gps-* custom properties below
 * (e.g. in the theme's own stylesheet) rather than these rules directly.
 */
.km-google-preferred-source {
    --km-gps-radius: .75rem;
    --km-gps-padding-inline: 1.25rem;
    --km-gps-padding-block: .5rem;
    --km-gps-icon-size: 18px;
    --km-gps-height: stretch;
    --km-gps-min-height: 40px;
    --km-gps-width: fit-content;
    --km-gps-border-color: #d1d5db;
    --km-gps-border-color-hover: #34a853;
    --km-gps-bg: #fff;
    --km-gps-color: #111;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--km-gps-width);
    height: var(--km-gps-height);
    min-height: var(--km-gps-min-height);
    padding-block: var(--km-gps-padding-block);
    padding-inline: var(--km-gps-padding-inline);
    transition: border-color .15s ease;
    border: 1px solid var(--km-gps-border-color);
    border-radius: var(--km-gps-radius);
    background: var(--km-gps-bg);
    color: var(--km-gps-color);
    font-family: Roboto, system-ui, -apple-system, sans-serif;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;
    gap: .75rem;
}

.km-google-preferred-source:hover {
    border-color: var(--km-gps-border-color-hover);
}

.km-google-preferred-source__icon {
    flex-shrink: 0;
    width: var(--km-gps-icon-size);
    height: var(--km-gps-icon-size);
}

/*
 * Icon-only variant, for placing alongside other social icons (e.g. the
 * footer's Instagram/LinkedIn/etc. row) instead of the full pill button.
 */
.km-google-preferred-source--icon-only {
    --km-gps-icon-size: 1.25rem;

    padding: 0;
    border: 0;
    background: none;
    color: inherit;
}

.km-google-preferred-source--icon-only:hover {
    border-color: transparent;
}