@layer buttons {
    :where(.call-to-action) {
        --local-border-radius: 5rem;
        --local-padding-block: 1rem;
        --local-padding-inline: 2rem;
        --local-font-weight: 400;

        padding-block: var(--local-padding-block);
        padding-inline: var(--local-padding-inline);
        text-decoration: none;
        transition-property: color, background-color, border-color;
        transition-duration: 0.25s;
        transition-timing-function: ease-in;
        font-weight: var(--local-font-weight, 400);
        text-align: center;
        display: inline-block;
        cursor: pointer;
        line-height: 2rem;
        min-height: 4.8rem;
        align-content: center;

        :where(&.call-to-action-link) {
            display: inline-block;
        }

        :where(&.call-to-action-button) {
            display: inline-flex;
            justify-content: center;
            align-items: center;

            color: var(--button-style-color, var(--color-primary-white));
            background-color: var(--button-style-background-color, var(--color-primary-black));
            border: 2px solid var(--button-style-border-color, var(--color-primary-white));
            border-radius: var(--local-border-radius);
            text-decoration: none !important;
            min-width: 20rem;

            :where(&:hover) {
                color: var(--button-style-hover-color, var(--color-primary-black));
                background-color: var(--button-style-hover-background-color, var(--color-primary-white));
                border: 2px solid var(--button-style-hover-border-color, var(--color-primary-black));
            }
        }
    }

    .call-to-action:hover,
    .call-to-action:focus-visible {
        text-decoration: none;
    }

    /*.call-to-action-primary {*/
    /*    --local-background-color: var(--color-brand-corporate-blue);*/
    /*    --local-color: var(--color-primary-white);*/
    /*    --local-border-color: var(--color-brand-corporate-blue);*/
    /*}*/
    /*.call-to-action-primary:where(:hover, :focus-visible) {*/
    /*    --local-background-color: var(--color-primary-white);*/
    /*    --local-color: var(--color-brand-corporate-blue);*/
    /*}*/
    /*.call-to-action-secondary {*/
    /*    --local-background-color: var(--color-primary-white);*/
    /*    --local-color: var(--color-brand-corporate-blue);*/
    /*    --local-border-color: var(--color-brand-corporate-blue);*/
    /*}*/
    /*.call-to-action-secondary:where(:hover, :focus-visible) {*/
    /*    --local-background-color: var(--color-brand-corporate-blue);*/
    /*    --local-color: var(--color-primary-white);*/
    /*}*/

}