:root :where(.call-to-action-wrap) {
    :where(.call-to-action) {
        --local-border-radius: 0.5rem;
        --local-padding-block: 1.5rem;
        --local-padding-inline: 4rem;
        --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);
        text-align: center;
        display: inline-block;
        cursor: pointer;
    }

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

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

        :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: 1px solid var(--button-style-hover-border-color, var(--color-primary-black));
        }
    }


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

    :where(.call-to-action:focus-visible ) {
        outline-offset: 1rem;
    }
}

@media print {
    :root :where(.call-to-action-wrap) {
        :where(.call-to-action) {
            transition: none;
        }

        :where(.call-to-action-button) {
            border-color: #000 !important;
        }
    }
}

/* This is required in order to make the admin area work correctly */

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

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