@layer buttons {
    .call-to-action {
        padding: 0.5rem 3rem;
        text-decoration: none !important;
        transition: all 0.25s ease-in;
        font-weight: 400;
        text-align: center;
        display: inline-block;
        max-width: 100%;
        width: fit-content;

        &:hover {
            text-decoration: none;
        }
    }

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

    .call-to-action-button {
        color: var(--button-style-color, var(--color-primary-white)) !important;
        background-color: var(--button-style-background-color, var(--color-primary-black));
        border: 1px solid var(--button-style-border-color, var(--button-style-background-color));
        border-radius: 4rem;
    }

    .call-to-action-button:hover {
        text-decoration: none !important;
        color: var(--button-style-hover-color, var(--color-primary-white)) !important;
        background-color: var(--button-style-hover-background-color, var(--color-primary-black));
        border: 1px solid var(--button-style-hover-border-color, var(--button-style-background-color));
    }

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

    .call-to-action-primary {
        --button-style-color: var(--color-brand-navy);
        --button-style-background-color: var(--color-primary-white);
        --button-style-border-color: var(--color-primary-white);
    }

    .call-to-action-primary:where(:hover, :focus-visible) {
        --button-style-hover-background-color: var(--color-primary-white);
        --button-style-hover-color: var(--color-brand-navy);
        --button-style-hover-border-color: var(--color-brand-navy);

    }

    .call-to-action-secondary {
        --button-style-background-color: 'transparent';
        --button-style-color: var(--color-brand-navy);
        --button-style-border-color: var(--color-brand-navy);

        &:where(:hover, :focus-visible) {
            --button-style-hover-background-color: var(--color-brand-navy);
            --button-style-hover-color: var(--color-primary-white);
            --button-style-hover-border-color: var(--color-brand-navy);
        }
    }

}