/** DEFAULT THEME **/

.block-cta-forms {
    --cta-forms-bg: var(--color-primary);
    --cta-forms-on-bg: var(--color-tint);
    --cta-forms-on-bg-link: var(--color-tint);

    --cta-forms-tabs-bg: var(--color-primary-tint-20);
    --cta-forms-tabs-padding-x: 4px;

    --cta-forms-tab-bg: var(--color-primary);
    --cta-forms-tab-on-bg: var(--color-tint);

    --cta-forms-accordion-bg: var(--color-tint);
    --cta-forms-accordion-on-bg: var(--color-contrast);
    --cta-forms-accordion-on-bg-hover: var(--color-primary);
    --cta-forms-accordion-icon: var(--color-primary);
    --cta-forms-accordion-open-bg: var(--color-secondary);
    --cta-forms-accordion-open-on-bg: var(--color-contrast);
    --cta-forms-accordion-open-icon: var(--color-contrast);

    --cta-forms-tooltip-bg: var(--color-contrast);
    --cta-forms-tooltip-on-bg: var(--color-tint);

    --cta-forms-border-radius: 21px;

    --cta-forms-padding-x: var(--margin-md);
}

.block-cta-forms .button {
    --button-color: var(--color-contrast);
    --button-bg-color: var(--color-tint);
    --button-bg-color-hover: var(--color-secondary);
}

.block-cta-forms.theme-secondary .button,
.block-cta-forms.theme-warning .button,
.block-cta-forms.theme-active .button {
    --button-color: var(--color-tint);
    --button-bg-color: var(--color-primary);
    --button-bg-color-hover: var(--color-primary-shade-20);
}

/** SECONDARY THEME **/

.block-cta-forms.theme-secondary {
    --cta-forms-bg: var(--color-secondary);
    --cta-forms-on-bg: var(--color-contrast);
    --cta-forms-on-bg-link: var(--color-contrast);

    --cta-forms-tabs-bg: var(--color-secondary-tint-40);

    --cta-forms-tab-bg: var(--color-secondary);
    --cta-forms-tab-on-bg: var(--color-contrast);

    --cta-forms-accordion-bg: var(--color-tint);
    --cta-forms-accordion-on-bg: var(--color-contrast);
    --cta-forms-accordion-on-bg-hover: var(--color-secondary);
    --cta-forms-accordion-icon: var(--color-secondary);
    --cta-forms-accordion-open-bg: var(--color-primary);
    --cta-forms-accordion-open-on-bg: var(--color-tint);
    --cta-forms-accordion-open-icon: var(--color-tint);
}

/** ACTIVE THEME **/

.block-cta-forms.theme-active {
    --cta-forms-bg: var(--color-active);
    --cta-forms-on-bg: var(--color-tint);
    --cta-forms-on-bg-link: var(--color-tint);

    --cta-forms-tabs-bg: var(--color-active-tint-40);

    --cta-forms-tab-bg: var(--color-active);
    --cta-forms-tab-on-bg: var(--color-tint);

    --cta-forms-accordion-bg: var(--color-tint);
    --cta-forms-accordion-on-bg: var(--color-contrast);
    --cta-forms-accordion-on-bg-hover: var(--color-primary);
    --cta-forms-accordion-icon: var(--color-primary);
    --cta-forms-accordion-open-bg: var(--color-primary);
    --cta-forms-accordion-open-on-bg: var(--color-tint);
    --cta-forms-accordion-open-icon: var(--color-tint);
}

/** WARNING THEME **/

.block-cta-forms.theme-warning {
    --cta-forms-bg: var(--color-warning);
    --cta-forms-on-bg: var(--color-contrast);
    --cta-forms-on-bg-link: var(--color-contrast);

    --cta-forms-tabs-bg: var(--color-warning-tint-40);

    --cta-forms-tab-bg: var(--color-warning);
    --cta-forms-tab-on-bg: var(--color-contrast);

    --cta-forms-accordion-bg: var(--color-tint);
    --cta-forms-accordion-on-bg: var(--color-contrast);
    --cta-forms-accordion-on-bg-hover: var(--color-primary);
    --cta-forms-accordion-icon: var(--color-primary);
    --cta-forms-accordion-open-bg: var(--color-primary);
    --cta-forms-accordion-open-on-bg: var(--color-tint);
    --cta-forms-accordion-open-icon: var(--color-tint);
}

.block-cta-forms > div {
    border-radius: var(--cta-forms-border-radius);
    background: var(--cta-forms-bg);
    color: var(--cta-forms-on-bg);
    padding: var(--cta-forms-padding-x);
}

.block-cta-forms .tabs {
    padding: var(--cta-forms-tabs-padding-x);
    border-radius: var(--cta-forms-border-radius);
    background: var(--cta-forms-tabs-bg);
}

.block-cta-forms .tab {
    min-height: 38px;
    border-radius: var(--cta-forms-border-radius);
    color: var(--cta-forms-tab-on-bg);
    transition-property: all;
    transition-timing-function: ease-in-out;
}

.block-cta-forms .tab.active {
    background: var(--cta-forms-tab-bg);
    transform: translateX(calc((100% - var(--cta-forms-tabs-padding-x) * 2) * var(--cta-forms-tabs)));
}

.block-cta-forms .tab-content a {
    color: var(--cta-forms-tab-on-bg);
}

.block-cta-forms .cta-form-sponsor .submit-button {
    min-width: 160px;
}

.block-cta-forms .tab-contents {
    display: flex;
    width: var(--cta-forms-tab-contents-width);
    gap: var(--cta-forms-padding-x);
    transition-property: transform;
    transition-timing-function: ease-in-out;
    transform: translateX(calc((-100% - var(--cta-forms-padding-x)) * var(--cta-forms-tab-contents-tab)));
}

.block-cta-forms .tab-contents > * {
    width: 100%;
    flex-shrink: 0;
    transition-property: transform;
}

.block-cta-forms .tab-contents .tab-active {
    transform: translateX(0);
}

/**
 * Accordions
 */

.block-cta-forms .accordions > *:not(:last-child) {
    margin-bottom: 10px;
}

.block-cta-forms .accordion {
    border-radius: var(--cta-forms-border-radius);
    background: var(--cta-forms-accordion-bg);
    color: var(--cta-forms-accordion-on-bg);
    padding: 12px 16px 12px 28px;
}

.block-cta-forms .accordion svg {
    color: var(--cta-forms-accordion-icon);
}

.block-cta-forms .accordion svg:last-child {
    display: none;
}

.block-cta-forms .accordion-content {
    height: 0;
    overflow: hidden;
    transition: all .2s ease-in-out;
}

.block-cta-forms input:checked + .accordion {
    background: var(--cta-forms-accordion-open-bg);
    color: var(--cta-forms-accordion-open-on-bg);
}

.block-cta-forms input:checked + .accordion svg {
    color: var(--cta-forms-accordion-open-icon);
}

.block-cta-forms input:checked + .accordion svg:first-child {
    display: none;
}

.block-cta-forms input:checked + .accordion svg:last-child {
    display: block;
}


.block-cta-forms input:checked + .accordion .accordion-content {
    height: var(--cta-forms-accordion-height);
}

/**
 * Radio group
 */

.block-cta-forms .option-group {
    --grid-columns: 1;
}

.block-cta-forms .options .grid {
    --grid-columns: 2;
}

.block-cta-forms .option  {
    margin-bottom: 10px;
    font-weight: 700;
    height: 44px;
    border-radius: var(--cta-forms-border-radius);
    background: var(--cta-forms-accordion-bg);
    color: var(--cta-forms-accordion-on-bg);
    padding: 12px 16px 12px 28px;
}

.block-cta-forms .grid > .option {
    padding: 12px 16px;
    text-align: center;
}

.block-cta-forms .grid > .option.icon {
    padding: 4px 16px;
}

.block-cta-forms .option svg {
    height: 100%;
    max-height: 100%;
    max-width: 100%;
}


.block-cta-forms .option svg:not(:only-child) {
    flex-basis: calc(100% / 3);
}

.block-cta-forms .option.custom-donation,
.block-cta-forms input:checked + .option {
    background: var(--cta-forms-accordion-open-bg);
    color: var(--cta-forms-accordion-open-on-bg);
}

.block-cta-forms .option.custom-donation,
.block-cta-forms input:checked + .option {
    color: var(--cta-forms-accordion-open-icon);
}

@media screen and (min-width: 48em) {
    .block-cta-forms .option-group {
        --grid-columns: 3;
    }

    .block-cta-forms .option-group > :first-child {
        grid-column: 1 / 3;
    }

    .block-cta-forms .options .grid {
        --grid-gap: 0;
        --grid-columns: 1;
    }
    
}

@media (prefers-color-scheme: dark) {
    .block-cta-forms {
        --cta-forms-bg: var(--color-primary-shade-20);
    }

    .block-cta-forms.theme-secondary {
        --cta-forms-bg: var(--color-secondary-shade-20);
    }

    .block-cta-forms.theme-warning {
        --cta-forms-bg: var(--color-warning-shade-20);
    }

    .block-cta-forms.theme-active {
        --cta-forms-bg: var(--color-active-shade-20);
    }

    .block-cta-forms.theme-secondary .button,
    .block-cta-forms.theme-warning .button,
    .block-cta-forms.theme-active .button {
        --button-color: var(--color-contrast);
        --button-bg-color: var(--color-tint);
        --button-bg-color-hover: var(--color-primary);
    }
    
    .block-cta-forms.theme-active .button {
        --button-bg-color-hover: var(--color-secondary);
    }  
}