/* Buttons */
.wpcz .wpcz-btn-set {
    margin-block-start: 3.75em;
    text-align: center;
}

.wpcz .wpcz-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25em;
    margin: 0;
    padding-block: 0.965em;
    padding-inline: 1.5em;
    block-size: auto;
    min-block-size: 3.215em;
    text-decoration: none;
    font: inherit;
    font-size: 0.875em;
    line-height: 1.15;
    background: var(--wpcz-default-bg-color);
    color: var(--wpcz-default-text-color);
    border: 1px solid transparent;
    border-radius: var(--wpcz-radius);
    -webkit-user-select: none;
    user-select: none;
    transition: background-color 0.1s ease;
}

.wpcz .wpcz-btn:hover {
    cursor: pointer;
}

.wpcz .wpcz-btn:focus {
    outline: none;
    box-shadow: none;
}

.wpcz .wpcz-btn:hover,
.wpcz .wpcz-btn:focus {
    text-decoration: none;
    background: var(--wpcz-default-bg-color-hover-and-focus);
    color: var(--wpcz-default-text-color-hover-and-focus);
}

.wpcz .wpcz-btn:focus-visible {
    text-decoration: none;
    box-shadow: 0 0 0 2px var(--wpcz-btn-outline-focus-inner-color), 0 0 0 4px var(--wpcz-default-bg-color);
    outline: none;
}

.wpcz .wpcz-btn:active {
    text-decoration: none;
    background-color: var(--wpcz-default-bg-color-active);
    color: var(--wpcz-default-text-color-active);
}

@media (min-width: 48em) {
    .wpcz .wpcz-btn {
        padding-block: 0.9593em;
        min-block-size: 3.2em;
        font-size: 0.9375em;
    }
}

.wpcz .wpcz-btn--primary {
    background-color: var(--wpcz-primary-bg-color);
    color: var(--wpcz-primary-text-color);
    border-color: var(--wpcz-primary-border-color);
}

.wpcz .wpcz-btn--primary:hover,
.wpcz .wpcz-btn--primary:focus {
    background: var(--wpcz-primary-bg-color-hover-and-focus);
    color: var(--wpcz-primary-text-color-hover-and-focus);
}

.wpcz .wpcz-btn--primary:focus-visible {
    box-shadow: 0 0 0 2px var(--wpcz-btn-outline-focus-inner-color), 0 0 0 4px var(--wpcz-primary-bg-color);
}

.wpcz .wpcz-btn--primary:active {
    background: var(--wpcz-primary-bg-color-active);
    color: var(--wpcz-primary-text-color-active);
}

.wpcz .wpcz-btn--secondary {
    background-color: var(--wpcz-secondary-bg-color);
    color: var(--wpcz-secondary-text-color);
}

.wpcz .wpcz-btn--secondary:hover,
.wpcz .wpcz-btn--secondary:focus {
    background-color: var(--wpcz-secondary-bg-color-hover-and-focus);
    color: var(--wpcz-secondary-text-color-hover-and-focus);
}

.wpcz .wpcz-btn--secondary:focus-visible {
    box-shadow: 0 0 0 2px var(--wpcz-btn-outline-focus-inner-color), 0 0 0 4px var(--wpcz-secondary-bg-color);
}

.wpcz .wpcz-btn--secondary:active {
    background-color: var(--wpcz-secondary-bg-color-active);
    color: var(--wpcz-secondary-text-color-active);
}

.wpcz .wpcz-btn--midtone {
    background-color: var(--wpcz-midtone-bg-color);
    color: var(--wpcz-midtone-text-color);
}

.wpcz .wpcz-btn--midtone:hover,
.wpcz .wpcz-btn--midtone:focus {
    background-color: var(--wpcz-midtone-bg-color-hover-and-focus);
    color: var(--wpcz-midtone-text-color-hover-and-focus);
}

.wpcz .wpcz-btn--midtone:focus-visible {
    box-shadow: 0 0 0 2px var(--wpcz-btn-outline-focus-inner-color), 0 0 0 4px var(--wpcz-midtone-bg-color);
}

.wpcz .wpcz-btn--midtone:active {
    background-color: var(--wpcz-midtone-bg-color-active);
    color: var(--wpcz-midtone-text-color-active);
}

.wpcz .wpcz-btn--dark {
    background-color: var(--wpcz-dark-bg-color);
    color: var(--wpcz-dark-text-color);
    border-color: var(--wpcz-dark-border-color);
}

.wpcz .wpcz-btn--dark:hover,
.wpcz .wpcz-btn--dark:focus {
    background-color: var(--wpcz-dark-bg-color-hover-and-focus);
    color: var(--wpcz-dark-text-color-hover-and-focus);
}

.wpcz .wpcz-btn--dark:focus-visible {
    box-shadow: 0 0 0 2px var(--wpcz-btn-outline-focus-inner-color), 0 0 0 4px var(--wpcz-dark-bg-color);
}

.wpcz .wpcz-btn--dark:active {
    background-color: var(--wpcz-dark-bg-color-active);
    color: var(--wpcz-dark-text-color-active);
}

.wpcz .wpcz-btn--information {
    background-color: var(--wpcz-information-bg-color);
    color: var(--wpcz-information-text-color);
}

.wpcz .wpcz-btn--information:hover,
.wpcz .wpcz-btn--information:focus {
    background-color: var(--wpcz-information-bg-color-hover-and-focus);
    color: var(--wpcz-information-text-color-hover-and-focus);
}

.wpcz .wpcz-btn--information:focus-visible {
    box-shadow: 0 0 0 2px var(--wpcz-btn-outline-focus-inner-color), 0 0 0 4px var(--wpcz-information-bg-color);
}

.wpcz .wpcz-btn--information:active {
    background-color: var(--wpcz-information-bg-color-active);
    color: var(--wpcz-information-text-color-active);
}

.wpcz .wpcz-btn--warning {
    background-color: var(--wpcz-warning-bg-color);
    color: var(--wpcz-warning-text-color);
    border-color: var(--wpcz-warning-border-color);
}

.wpcz .wpcz-btn--warning:hover,
.wpcz .wpcz-btn--warning:focus {
    background: var(--wpcz-warning-bg-color-hover-and-focus);
    color: var(--wpcz-warning-text-color-hover-and-focus);
}

.wpcz .wpcz-btn--warning:focus-visible {
    box-shadow: 0 0 0 2px var(--wpcz-btn-outline-focus-inner-color), 0 0 0 4px var(--wpcz-warning-bg-color);
}

.wpcz .wpcz-btn--warning:active {
    background: var(--wpcz-warning-bg-color-active);
    color: var(--wpcz-warning-text-color-active);
}

.wpcz .wpcz-btn--success {
    background-color: var(--wpcz-success-bg-color);
    color: var(--wpcz-success-text-color);
    border-color: var(--wpcz-success-border-color);
}

.wpcz .wpcz-btn--success:hover,
.wpcz .wpcz-btn--success:focus {
    background-color: var(--wpcz-success-bg-color-hover-and-focus);
    color: var(--wpcz-success-text-color-hover-and-focus);
}

.wpcz .wpcz-btn--success:focus-visible {
    box-shadow: 0 0 0 2px var(--wpcz-btn-outline-focus-inner-color), 0 0 0 4px var(--wpcz-success-bg-color);
}

.wpcz .wpcz-btn--success:active {
    background-color: var(--wpcz-success-bg-color-active);
    color: var(--wpcz-success-text-color-active);
}

.wpcz .wpcz-btn--error {
    background-color: var(--wpcz-error-bg-color);
    color: var(--wpcz-error-text-color);
    border-color: var(--wpcz-error-border-color);
}

.wpcz .wpcz-btn--error:hover,
.wpcz .wpcz-btn--error:focus {
    background-color: var(--wpcz-error-bg-color-hover-and-focus);
    color: var(--wpcz-error-text-color-hover-and-focus);
}

.wpcz .wpcz-btn--error:focus-visible {
    box-shadow: 0 0 0 2px var(--wpcz-btn-outline-focus-inner-color), 0 0 0 4px var(--wpcz-error-bg-color);
}

.wpcz .wpcz-btn--error:active {
    background-color: var(--wpcz-error-bg-color-active);
    color: var(--wpcz-error-text-color-active);
}

.wpcz .wpcz-btn--ghost-text {
    background-color: transparent;
    border-color: transparent;
}

.wpcz .wpcz-btn--ghost-text:where(.wpcz-btn--primary) {
    color: var(--wpcz-primary-bg-color);
}

.wpcz .wpcz-btn--ghost-text:where(.wpcz-btn--secondary) {
    color: var(--wpcz-secondary-bg-color);
}

.wpcz .wpcz-btn--ghost-text:where(.wpcz-btn--midtone) {
    color: var(--wpcz-midtone-bg-color);
}

.wpcz .wpcz-btn--ghost-text:where(.wpcz-btn--dark) {
    color: var(--wpcz-dark-bg-color);
}

.wpcz .wpcz-btn--ghost-text:where(.wpcz-btn--information) {
    color: var(--wpcz-information-bg-color);
}

.wpcz .wpcz-btn--ghost-text:where(.wpcz-btn--warning) {
    color: var(--wpcz-warning-bg-color);
}

.wpcz .wpcz-btn--ghost-text:where(.wpcz-btn--success) {
    color: var(--wpcz-success-bg-color);
}

.wpcz .wpcz-btn--ghost-text:where(.wpcz-btn--error) {
    color: var(--wpcz-error-bg-color);
}

.wpcz .wpcz-btn:where(.wpcz-btn--ghost-outline) {
    background-color: transparent;
    border-color: currentColor;
    color: var(--wpcz-default-text-color);
}

.wpcz .wpcz-btn:where(.wpcz-btn--ghost-outline):hover,
.wpcz .wpcz-btn:where(.wpcz-btn--ghost-outline):focus,
.wpcz .wpcz-btn:where(.wpcz-btn--ghost-outline):active {
    border-color: transparent;
}

.wpcz .wpcz-btn--ghost-outline:where(.wpcz-btn--primary) {
    color: var(--wpcz-primary-bg-color);
}

.wpcz .wpcz-btn--ghost-outline:where(.wpcz-btn--secondary) {
    color: var(--wpcz-secondary-bg-color);
}

.wpcz .wpcz-btn--ghost-outline:where(.wpcz-btn--midtone) {
    color: var(--wpcz-midtone-bg-color);
}

.wpcz .wpcz-btn--ghost-outline:where(.wpcz-btn--dark) {
    color: var(--wpcz-dark-bg-color);
}

.wpcz .wpcz-btn--ghost-outline:where(.wpcz-btn--information) {
    color: var(--wpcz-information-bg-color);
}

.wpcz .wpcz-btn--ghost-outline:where(.wpcz-btn--warning) {
    color: var(--wpcz-warning-bg-color);
    border-color: var(--wpcz-warning-bg-color);
}

.wpcz .wpcz-btn--ghost-outline:where(.wpcz-btn--success) {
    color: var(--wpcz-success-bg-color);
}

.wpcz .wpcz-btn--ghost-outline:where(.wpcz-btn--error) {
    color: var(--wpcz-error-bg-color);
}

/* Button Icons */
.wpcz .wpcz-btn__icon {
    display: block;
    margin-block: -1em;
    inline-size: 1.5em;
    block-size: 1.5em;
    fill: currentColor;
    flex: none;
}

.wpcz .wpcz-btn--has-icon-start .wpcz-btn__icon {
    margin-inline-end: 0.25em;
}

.wpcz .wpcz-btn--has-icon-end .wpcz-btn__icon {
    order: 1;
    margin-inline-start: 0.25em;
}

.wpcz .wpcz-btn__text {
    display: block;
}

.wpcz .wpcz-btn--has-icon-only .wpcz-btn__text {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    white-space: nowrap;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
}