:root {
    --btn-padding: 1.2rem 3rem;
    --btn-radius: 0;
    --btn-border: 0.1rem;

    --btn-bg: var(--grey-50, #e5e2e1);
    --btn-bordercolor: transparent;
    --btn-color: var(--grey-950, #141414);
    --btn-fontface: var(--font-special);
    --btn-fontsize: var(--fs-16, 1.6rem);
    --btn-fontweight: 600;
    --btn-lineheight: 2.4rem;

    --btn-iconsize: 1ch;
}

:is(body .wp-block, body:not(.wp-admin)) :where(.btn, input[type=submit], button) {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--btn-padding);
    border: var(--btn-border) solid var(--btn-bordercolor);
    border-radius: var(--btn-radius, var(--theme-radius, 0));
    background-color: var(--btn-bg);
    color: var(--btn-color);
    font-size: var(--btn-fontsize);
    font-family: var(--btn-fontface);
    font-weight: var(--btn-fontweight);
    text-decoration: none;
    line-height: var(--btn-lineheight);
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.25s, color 0.25s, border-color 0.25s;

    &.btn--primary {
        --btn-bg: var(--white);
        --btn-bordercolor: transparent;
        --btn-color: var(--grey-950, #141414);


        &:is(:hover, :focus-visible) {
            background-color: color-mix(in srgb, var(--btn-bg) 90%, var(--black));
        }
    }

    &.btn--secondary {
        --btn-bg: transparent;
        --btn-bordercolor: var(--white);
        --btn-color: var(--white);

        &:is(:hover, :focus-visible) {
            --btn-bg: var(--white);
            --btn-color: var(--grey-950, #141414);
        }
    }

    &.btn--small {
        --btn-padding: 0.6em 1em;
    }

    &.btn--green-500 {
        --btn-bg: var(--green-500, #5aad5a);
        --btn-color: var(--grey-950, #141414);

        &:is(:hover, :focus-visible) {
            background-color: color-mix(in srgb, var(--green-500, #5aad5a) 90%, var(--black));
        }
    }

    &.btn--black {
        --btn-bg: var(--black, #000);
        --btn-bordercolor: transparent;
        --btn-color: var(--white, #fff);

        &:is(:hover, :focus-visible) {
            --btn-bg: var(--grey-950, #141414);
            --btn-color: var(--white, #fff);
        }
    }
}

.full-link {
    position: absolute;
    inset: 0;
    z-index: 5;
}