/**
 * Pendo Consent — the one piece of chrome the package adds to a site.
 *
 * A visitor has to be able to reach their choice again, otherwise
 * consent can be given but never taken back. Everything here is scoped
 * to one element and themeable, so a site can move it or restyle it
 * without fighting the package.
 */

.pendo-consent-button {
    --pc-size: 2.75rem;
    /* Follows the banner unless a site overrides --pc-* itself: the
       button is the same conversation as the banner, and a black bubble
       on a light site looks like someone else's widget. */
    --pc-bg: var(--cc-bg, #0b1016);
    --pc-color: var(--cc-primary-color, #ffffff);
    --pc-border: var(--cc-btn-secondary-bg, rgba(127, 127, 127, 0.35));
    --pc-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    --pc-offset: 1rem;

    position: fixed;
    bottom: var(--pc-offset);
    left: var(--pc-offset);
    z-index: 2147483000;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--pc-size);
    height: var(--pc-size);
    padding: 0;

    background: var(--pc-bg);
    color: var(--pc-color);
    border: 1px solid var(--pc-border);
    border-radius: 50%;
    box-shadow: var(--pc-shadow);
    cursor: pointer;

    transition: transform 0.15s ease, opacity 0.15s ease;
}

.pendo-consent-button[data-position='bottom-right'] {
    left: auto;
    right: var(--pc-offset);
}

.pendo-consent-button:hover,
.pendo-consent-button:focus-visible {
    transform: scale(1.06);
}

/* Keep the focus ring: this is the only way back to the choice. */
.pendo-consent-button:focus-visible {
    outline: 2px solid var(--pc-color);
    outline-offset: 2px;
}

.pendo-consent-button svg {
    width: 55%;
    height: 55%;
    display: block;
    fill: currentColor;
}

/* The banner itself sits above it; two overlapping layers would only
   compete for the same corner. */
.pendo-consent-button[hidden] {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .pendo-consent-button {
        transition: none;
    }
}

/* The list of embeds a visitor allowed one at a time, inside the
   preferences screen. Styled to sit quietly among cookieconsent's own
   sections rather than compete with them. */
.pendo-consent-embeds__list {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pendo-consent-embeds__list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--cc-cookie-category-block-border, rgba(0, 0, 0, 0.12));
    border-radius: var(--cc-btn-border-radius, 0.4rem);
}

.pendo-consent-embeds__withdraw {
    flex: none;
    padding: 0.35rem 0.75rem;
    font: inherit;
    font-size: 0.85em;
    cursor: pointer;
    color: var(--cc-btn-secondary-color, inherit);
    background: var(--cc-btn-secondary-bg, rgba(0, 0, 0, 0.06));
    border: none;
    border-radius: var(--cc-btn-border-radius, 0.4rem);
}

.pendo-consent-embeds__withdraw:hover,
.pendo-consent-embeds__withdraw:focus-visible {
    background: var(--cc-btn-secondary-hover-bg, rgba(0, 0, 0, 0.12));
}