@layer buttons {
    .call-to-action {
        padding: 0.5rem 3rem;
        text-decoration: none;
        transition: all 0.25s ease-in;
        font-weight: 400;
        text-align: center;
        display: inline-block;
    }

    .call-to-action-link {
        display: inline-block;
    }

    .call-to-action-button {
        color: var(--local-color, var(--color-primary-white));
        background-color: var(--local-background-color, var(--color-primary-black));
        border: 1px solid var(--local-border-color, var(--local-background-color));
        border-radius: 5rem;
        text-decoration: none !important;
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }

    .call-to-action-button:hover {
        text-decoration: none !important;
    }

    .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);
    }

}