.rz-button.rz-primary:focus-visible {
    outline-color: var(--rz-primary);
}

.rz-button.rz-secondary:focus-visible {
    outline-color: var(--rz-secondary);
}

.rz-button.rz-info:focus-visible {
    outline-color: var(--rz-info);
}

.rz-button.rz-warning:focus-visible {
    outline-color: var(--rz-warning);
}

.rz-button.rz-error:focus-visible {
    outline-color: var(--rz-error);
}

.rz-button.rz-danger:focus-visible {
    outline-color: var(--rz-danger);
}

.rz-button.rz-success:focus-visible {
    outline-color: var(--rz-success);
}

.rz-button.rz-base:focus-visible {
    outline-color: var(--rz-base);
}

.rz-button.rz-light:focus-visible {
    outline-color: var(--rz-outline-color);
}

.rz-button.rz-dark:focus-visible {
    outline-color: var(--rz-outline-color);
}

.rz-button.rz-primary {
    background-color: var(--rz-primary);
    color: var(--rz-on-primary);
}

    .rz-button.rz-primary.rz-shade-lighter {
        background-color: var(--rz-primary-lighter);
        color: var(--rz-on-primary-lighter);
    }

    .rz-button.rz-primary.rz-shade-light {
        background-color: var(--rz-primary-light);
        color: var(--rz-on-primary-light);
    }

    .rz-button.rz-primary.rz-shade-default {
        background-color: var(--rz-primary);
        color: var(--rz-on-primary);
    }

    .rz-button.rz-primary.rz-shade-dark {
        background-color: var(--rz-primary-dark);
        color: var(--rz-on-primary-dark);
    }

    .rz-button.rz-primary.rz-shade-darker {
        background-color: var(--rz-primary-darker);
        color: var(--rz-on-primary-darker);
    }

    .rz-button.rz-primary.rz-variant-flat {
        box-shadow: none !important;
    }

        .rz-button.rz-primary.rz-variant-flat:focus-visible {
            outline-color: var(--rz-primary);
        }

.rz-button.rz-secondary {
    background-color: var(--rz-secondary);
    color: var(--rz-on-secondary);
}

    .rz-button.rz-secondary.rz-shade-lighter {
        background-color: var(--rz-secondary-lighter);
        color: var(--rz-on-secondary-lighter);
    }

    .rz-button.rz-secondary.rz-shade-light {
        background-color: var(--rz-secondary-light);
        color: var(--rz-on-secondary-light);
    }

    .rz-button.rz-secondary.rz-shade-default {
        background-color: var(--rz-secondary);
        color: var(--rz-on-secondary);
    }

    .rz-button.rz-secondary.rz-shade-dark {
        background-color: var(--rz-secondary-dark);
        color: var(--rz-on-secondary-dark);
    }

    .rz-button.rz-secondary.rz-shade-darker {
        background-color: var(--rz-secondary-darker);
        color: var(--rz-on-secondary-darker);
    }

    .rz-button.rz-secondary.rz-variant-flat {
        box-shadow: none !important;
    }

        .rz-button.rz-secondary.rz-variant-flat:focus-visible {
            outline-color: var(--rz-secondary);
        }

.rz-button.rz-info {
    background-color: var(--rz-info);
    color: var(--rz-on-info);
}

    .rz-button.rz-info.rz-shade-lighter {
        background-color: var(--rz-info-lighter);
        color: var(--rz-on-info-lighter);
    }

    .rz-button.rz-info.rz-shade-light {
        background-color: var(--rz-info-light);
        color: var(--rz-on-info-light);
    }

    .rz-button.rz-info.rz-shade-default {
        background-color: var(--rz-info);
        color: var(--rz-on-info);
    }

    .rz-button.rz-info.rz-shade-dark {
        background-color: var(--rz-info-dark);
        color: var(--rz-on-info-dark);
    }

    .rz-button.rz-info.rz-shade-darker {
        background-color: var(--rz-info-darker);
        color: var(--rz-on-info-darker);
    }

    .rz-button.rz-info.rz-variant-flat {
        box-shadow: none !important;
    }

        .rz-button.rz-info.rz-variant-flat:focus-visible {
            outline-color: var(--rz-info);
        }

.rz-button.rz-warning {
    background-color: var(--rz-warning);
    color: var(--rz-on-warning);
}

    .rz-button.rz-warning.rz-shade-lighter {
        background-color: var(--rz-warning-lighter);
        color: var(--rz-on-warning-lighter);
    }

    .rz-button.rz-warning.rz-shade-light {
        background-color: var(--rz-warning-light);
        color: var(--rz-on-warning-light);
    }

    .rz-button.rz-warning.rz-shade-default {
        background-color: var(--rz-warning);
        color: var(--rz-on-warning);
    }

    .rz-button.rz-warning.rz-shade-dark {
        background-color: var(--rz-warning-dark);
        color: var(--rz-on-warning-dark);
    }

    .rz-button.rz-warning.rz-shade-darker {
        background-color: var(--rz-warning-darker);
        color: var(--rz-on-warning-darker);
    }

    .rz-button.rz-warning.rz-variant-flat {
        box-shadow: none !important;
    }

        .rz-button.rz-warning.rz-variant-flat:focus-visible {
            outline-color: var(--rz-warning);
        }

.rz-button.rz-error {
    background-color: var(--rz-danger);
    color: var(--rz-on-danger);
}

    .rz-button.rz-error.rz-shade-lighter {
        background-color: var(--rz-error-lighter);
        color: var(--rz-on-error-lighter);
    }

    .rz-button.rz-error.rz-shade-light {
        background-color: var(--rz-error-light);
        color: var(--rz-on-error-light);
    }

    .rz-button.rz-error.rz-shade-default {
        background-color: var(--rz-error);
        color: var(--rz-on-error);
    }

    .rz-button.rz-error.rz-shade-dark {
        background-color: var(--rz-error-dark);
        color: var(--rz-on-error-dark);
    }

    .rz-button.rz-error.rz-shade-darker {
        background-color: var(--rz-error-darker);
        color: var(--rz-on-error-darker);
    }

    .rz-button.rz-error.rz-variant-flat {
        box-shadow: none !important;
    }

        .rz-button.rz-error.rz-variant-flat:focus-visible {
            outline-color: var(--rz-error);
        }

.rz-button.rz-danger {
    background-color: var(--rz-danger);
    color: var(--rz-on-danger);
}

    .rz-button.rz-danger.rz-shade-lighter {
        background-color: var(--rz-danger-lighter);
        color: var(--rz-on-danger-lighter);
    }

    .rz-button.rz-danger.rz-shade-light {
        background-color: var(--rz-danger-light);
        color: var(--rz-on-danger-light);
    }

    .rz-button.rz-danger.rz-shade-default {
        background-color: var(--rz-danger);
        color: var(--rz-on-danger);
    }

    .rz-button.rz-danger.rz-shade-dark {
        background-color: var(--rz-danger-dark);
        color: var(--rz-on-danger-dark);
    }

    .rz-button.rz-danger.rz-shade-darker {
        background-color: var(--rz-danger-darker);
        color: var(--rz-on-danger-darker);
    }

    .rz-button.rz-danger.rz-variant-flat {
        box-shadow: none !important;
    }

        .rz-button.rz-danger.rz-variant-flat:focus-visible {
            outline-color: var(--rz-danger);
        }

.rz-button.rz-success {
    background-color: var(--rz-success);
    color: var(--rz-on-success);
}

    .rz-button.rz-success.rz-shade-lighter {
        background-color: var(--rz-success-lighter);
        color: var(--rz-on-success-lighter);
    }

    .rz-button.rz-success.rz-shade-light {
        background-color: var(--rz-success-light);
        color: var(--rz-on-success-light);
    }

    .rz-button.rz-success.rz-shade-default {
        background-color: var(--rz-success);
        color: var(--rz-on-success);
    }

    .rz-button.rz-success.rz-shade-dark {
        background-color: var(--rz-success-dark);
        color: var(--rz-on-success-dark);
    }

    .rz-button.rz-success.rz-shade-darker {
        background-color: var(--rz-success-darker);
        color: var(--rz-on-success-darker);
    }

    .rz-button.rz-success.rz-variant-flat {
        box-shadow: none !important;
    }

        .rz-button.rz-success.rz-variant-flat:focus-visible {
            outline-color: var(--rz-success);
        }

.rz-button.rz-base {
    background-color: var(--rz-base-200);
    color: var(--rz-text-color);
}

    .rz-button.rz-base.rz-shade-lighter {
        background-color: var(--rz-base-lighter);
        color: var(--rz-on-base-lighter);
    }

    .rz-button.rz-base.rz-shade-light {
        background-color: var(--rz-base-light);
        color: var(--rz-on-base-light);
    }

    .rz-button.rz-base.rz-shade-default {
        background-color: var(--rz-base);
        color: var(--rz-on-base);
    }

    .rz-button.rz-base.rz-shade-dark {
        background-color: var(--rz-base-dark);
        color: var(--rz-on-base-dark);
    }

    .rz-button.rz-base.rz-shade-darker {
        background-color: var(--rz-base-darker);
        color: var(--rz-on-base-darker);
    }

    .rz-button.rz-base.rz-variant-flat {
        box-shadow: none !important;
    }

        .rz-button.rz-base.rz-variant-flat:focus-visible {
            outline-color: var(--rz-base);
        }

.rz-button.rz-light {
    background-color: var(--rz-base-200);
    color: var(--rz-text-color);
}

    .rz-button.rz-light.rz-variant-flat {
        box-shadow: none !important;
    }

        .rz-button.rz-light.rz-variant-flat:focus-visible {
            outline-color: var(--rz-outline-color);
        }

.rz-button.rz-dark {
    background-color: var(--rz-base-900);
    color: var(--rz-text-contrast-color);
}

    .rz-button.rz-dark.rz-variant-flat {
        box-shadow: none !important;
    }

        .rz-button.rz-dark.rz-variant-flat:focus-visible {
            outline-color: var(--rz-outline-color);
        }

.rz-button.rz-variant-outlined.rz-primary {
    background-color: rgba(0, 0, 0, 0);
}

    .rz-button.rz-variant-outlined.rz-primary.rz-shade-lighter {
        box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-lighter);
        color: var(--rz-primary-light);
    }

    .rz-button.rz-variant-outlined.rz-primary.rz-shade-light {
        box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-light);
        color: var(--rz-primary-light);
    }

    .rz-button.rz-variant-outlined.rz-primary.rz-shade-default {
        box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary);
        color: var(--rz-primary);
    }

    .rz-button.rz-variant-outlined.rz-primary.rz-shade-dark {
        box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-dark);
        color: var(--rz-primary-dark);
    }

    .rz-button.rz-variant-outlined.rz-primary.rz-shade-darker {
        box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-darker);
        color: var(--rz-primary-darker);
    }

@media(hover: hover)and (pointer: fine) {
    .rz-button.rz-variant-outlined.rz-primary: not(.rz-state-disabled):hover {
        background-color: var(--rz-primary-lighter);
        color: var(--rz-on-primary-lighter);
        background-image: none;
    }
}

.rz-button.rz-variant-outlined.rz-primary:not(.rz-state-disabled):active {
    background-color: var(--rz-primary-lighter);
    color: var(--rz-on-primary-lighter);
    background-image: none;
}

.rz-button.rz-variant-outlined.rz-secondary {
    background-color: rgba(0, 0, 0, 0);
}

    .rz-button.rz-variant-outlined.rz-secondary.rz-shade-lighter {
        box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-lighter);
        color: var(--rz-secondary-light);
    }

    .rz-button.rz-variant-outlined.rz-secondary.rz-shade-light {
        box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-light);
        color: var(--rz-secondary-light);
    }

    .rz-button.rz-variant-outlined.rz-secondary.rz-shade-default {
        box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary);
        color: var(--rz-secondary);
    }

    .rz-button.rz-variant-outlined.rz-secondary.rz-shade-dark {
        box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-dark);
        color: var(--rz-secondary-dark);
    }

    .rz-button.rz-variant-outlined.rz-secondary.rz-shade-darker {
        box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-darker);
        color: var(--rz-secondary-darker);
    }

@media(hover: hover)and (pointer: fine) {
    .rz-button.rz-variant-outlined.rz-secondary: not(.rz-state-disabled):hover {
        background-color: var(--rz-secondary-lighter);
        color: var(--rz-on-secondary-lighter);
        background-image: none;
    }
}

.rz-button.rz-variant-outlined.rz-secondary:not(.rz-state-disabled):active {
    background-color: var(--rz-secondary-lighter);
    color: var(--rz-on-secondary-lighter);
    background-image: none;
}

.rz-button.rz-variant-outlined.rz-info {
    background-color: rgba(0, 0, 0, 0);
}

    .rz-button.rz-variant-outlined.rz-info.rz-shade-lighter {
        box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-lighter);
        color: var(--rz-info-light);
    }

    .rz-button.rz-variant-outlined.rz-info.rz-shade-light {
        box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-light);
        color: var(--rz-info-light);
    }

    .rz-button.rz-variant-outlined.rz-info.rz-shade-default {
        box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info);
        color: var(--rz-info);
    }

    .rz-button.rz-variant-outlined.rz-info.rz-shade-dark {
        box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-dark);
        color: var(--rz-info-dark);
    }

    .rz-button.rz-variant-outlined.rz-info.rz-shade-darker {
        box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-darker);
        color: var(--rz-info-darker);
    }

@media(hover: hover)and (pointer: fine) {
    .rz-button.rz-variant-outlined.rz-info: not(.rz-state-disabled):hover {
        background-color: var(--rz-info-lighter);
        color: var(--rz-on-info-lighter);
        background-image: none;
    }
}

.rz-button.rz-variant-outlined.rz-info:not(.rz-state-disabled):active {
    background-color: var(--rz-info-lighter);
    color: var(--rz-on-info-lighter);
    background-image: none;
}

.rz-button.rz-variant-outlined.rz-warning {
    background-color: rgba(0, 0, 0, 0);
}

    .rz-button.rz-variant-outlined.rz-warning.rz-shade-lighter {
        box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-lighter);
        color: var(--rz-warning-light);
    }

    .rz-button.rz-variant-outlined.rz-warning.rz-shade-light {
        box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-light);
        color: var(--rz-warning-light);
    }

    .rz-button.rz-variant-outlined.rz-warning.rz-shade-default {
        box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning);
        color: var(--rz-warning);
    }

    .rz-button.rz-variant-outlined.rz-warning.rz-shade-dark {
        box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-dark);
        color: var(--rz-warning-dark);
    }

    .rz-button.rz-variant-outlined.rz-warning.rz-shade-darker {
        box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-darker);
        color: var(--rz-warning-darker);
    }

@media(hover: hover)and (pointer: fine) {
    .rz-button.rz-variant-outlined.rz-warning: not(.rz-state-disabled):hover {
        background-color: var(--rz-warning-lighter);
        color: var(--rz-on-warning-lighter);
        background-image: none;
    }
}

.rz-button.rz-variant-outlined.rz-warning:not(.rz-state-disabled):active {
    background-color: var(--rz-warning-lighter);
    color: var(--rz-on-warning-lighter);
    background-image: none;
}

.rz-button.rz-variant-outlined.rz-error {
    background-color: rgba(0, 0, 0, 0);
}

    .rz-button.rz-variant-outlined.rz-error.rz-shade-lighter {
        box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-lighter);
        color: var(--rz-error-light);
    }

    .rz-button.rz-variant-outlined.rz-error.rz-shade-light {
        box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-light);
        color: var(--rz-error-light);
    }

    .rz-button.rz-variant-outlined.rz-error.rz-shade-default {
        box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error);
        color: var(--rz-error);
    }

    .rz-button.rz-variant-outlined.rz-error.rz-shade-dark {
        box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-dark);
        color: var(--rz-error-dark);
    }

    .rz-button.rz-variant-outlined.rz-error.rz-shade-darker {
        box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-darker);
        color: var(--rz-error-darker);
    }

@media(hover: hover)and (pointer: fine) {
    .rz-button.rz-variant-outlined.rz-error: not(.rz-state-disabled):hover {
        background-color: var(--rz-error-lighter);
        color: var(--rz-on-error-lighter);
        background-image: none;
    }
}

.rz-button.rz-variant-outlined.rz-error:not(.rz-state-disabled):active {
    background-color: var(--rz-error-lighter);
    color: var(--rz-on-error-lighter);
    background-image: none;
}

.rz-button.rz-variant-outlined.rz-danger {
    background-color: rgba(0, 0, 0, 0);
}

    .rz-button.rz-variant-outlined.rz-danger.rz-shade-lighter {
        box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-lighter);
        color: var(--rz-danger-light);
    }

    .rz-button.rz-variant-outlined.rz-danger.rz-shade-light {
        box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-light);
        color: var(--rz-danger-light);
    }

    .rz-button.rz-variant-outlined.rz-danger.rz-shade-default {
        box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger);
        color: var(--rz-danger);
    }

    .rz-button.rz-variant-outlined.rz-danger.rz-shade-dark {
        box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-dark);
        color: var(--rz-danger-dark);
    }

    .rz-button.rz-variant-outlined.rz-danger.rz-shade-darker {
        box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-darker);
        color: var(--rz-danger-darker);
    }

@media(hover: hover)and (pointer: fine) {
    .rz-button.rz-variant-outlined.rz-danger: not(.rz-state-disabled):hover {
        background-color: var(--rz-danger-lighter);
        color: var(--rz-on-danger-lighter);
        background-image: none;
    }
}

.rz-button.rz-variant-outlined.rz-danger:not(.rz-state-disabled):active {
    background-color: var(--rz-danger-lighter);
    color: var(--rz-on-danger-lighter);
    background-image: none;
}

.rz-button.rz-variant-outlined.rz-success {
    background-color: rgba(0, 0, 0, 0);
}

    .rz-button.rz-variant-outlined.rz-success.rz-shade-lighter {
        box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-lighter);
        color: var(--rz-success-light);
    }

    .rz-button.rz-variant-outlined.rz-success.rz-shade-light {
        box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-light);
        color: var(--rz-success-light);
    }

    .rz-button.rz-variant-outlined.rz-success.rz-shade-default {
        box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success);
        color: var(--rz-success);
    }

    .rz-button.rz-variant-outlined.rz-success.rz-shade-dark {
        box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-dark);
        color: var(--rz-success-dark);
    }

    .rz-button.rz-variant-outlined.rz-success.rz-shade-darker {
        box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-darker);
        color: var(--rz-success-darker);
    }

@media(hover: hover)and (pointer: fine) {
    .rz-button.rz-variant-outlined.rz-success: not(.rz-state-disabled):hover {
        background-color: var(--rz-success-lighter);
        color: var(--rz-on-success-lighter);
        background-image: none;
    }
}

.rz-button.rz-variant-outlined.rz-success:not(.rz-state-disabled):active {
    background-color: var(--rz-success-lighter);
    color: var(--rz-on-success-lighter);
    background-image: none;
}

.rz-button.rz-variant-outlined.rz-base {
    background-color: rgba(0, 0, 0, 0);
}

    .rz-button.rz-variant-outlined.rz-base.rz-shade-lighter {
        box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-lighter);
        color: var(--rz-base-light);
    }

    .rz-button.rz-variant-outlined.rz-base.rz-shade-light {
        box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-light);
        color: var(--rz-base-light);
    }

    .rz-button.rz-variant-outlined.rz-base.rz-shade-default {
        box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-text-color);
        color: var(--rz-text-color);
    }

    .rz-button.rz-variant-outlined.rz-base.rz-shade-dark {
        box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-dark);
        color: var(--rz-base-dark);
    }

    .rz-button.rz-variant-outlined.rz-base.rz-shade-darker {
        box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-darker);
        color: var(--rz-base-darker);
    }

@media(hover: hover)and (pointer: fine) {
    .rz-button.rz-variant-outlined.rz-base: not(.rz-state-disabled):hover {
        background-color: var(--rz-base-lighter);
        color: var(--rz-on-base-lighter);
        background-image: none;
    }
}

.rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):active {
    background-color: var(--rz-base-lighter);
    color: var(--rz-on-base-lighter);
    background-image: none;
}

.rz-button.rz-variant-outlined.rz-light {
    background-color: rgba(0, 0, 0, 0);
}

    .rz-button.rz-variant-outlined.rz-light.rz-shade-default {
        box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-200);
        color: var(--rz-base-200);
    }

@media(hover: hover)and (pointer: fine) {
    .rz-button.rz-variant-outlined.rz-light: not(.rz-state-disabled):hover {
        background-color: rgba(255, 255, 255, .12);
        background-image: none;
    }
}

.rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):active {
    background-color: rgba(255, 255, 255, .12);
    background-image: none;
}

.rz-button.rz-variant-outlined.rz-dark {
    background-color: rgba(0, 0, 0, 0);
}

    .rz-button.rz-variant-outlined.rz-dark.rz-shade-default {
        box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900);
        color: var(--rz-base-900);
    }

@media(hover: hover)and (pointer: fine) {
    .rz-button.rz-variant-outlined.rz-dark: not(.rz-state-disabled):hover {
        background-color: rgba(0, 0, 0, .12);
        background-image: none;
    }
}

.rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):active {
    background-color: rgba(0, 0, 0, .12);
    background-image: none;
}

.rz-button.rz-variant-text.rz-primary {
    background-color: rgba(0, 0, 0, 0);
    box-shadow: none;
}

    .rz-button.rz-variant-text.rz-primary.rz-shade-lighter {
        color: var(--rz-primary-lighter);
    }

    .rz-button.rz-variant-text.rz-primary.rz-shade-light {
        color: var(--rz-primary-light);
    }

    .rz-button.rz-variant-text.rz-primary.rz-shade-default {
        color: var(--rz-primary);
    }

    .rz-button.rz-variant-text.rz-primary.rz-shade-dark {
        color: var(--rz-primary-dark);
    }

    .rz-button.rz-variant-text.rz-primary.rz-shade-darker {
        color: var(--rz-primary-darker);
    }

@media(hover: hover)and (pointer: fine) {
    .rz-button.rz-variant-text.rz-primary: not(.rz-state-disabled):hover {
        background-color: var(--rz-primary-lighter);
        color: var(--rz-on-primary-lighter);
        background-image: none;
        box-shadow: none;
    }
}

.rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):active {
    background-color: var(--rz-primary-lighter);
    color: var(--rz-on-primary-lighter);
    background-image: none;
    box-shadow: none;
}

.rz-button.rz-variant-text.rz-secondary {
    background-color: rgba(0, 0, 0, 0);
    box-shadow: none;
}

    .rz-button.rz-variant-text.rz-secondary.rz-shade-lighter {
        color: var(--rz-secondary-lighter);
    }

    .rz-button.rz-variant-text.rz-secondary.rz-shade-light {
        color: var(--rz-secondary-light);
    }

    .rz-button.rz-variant-text.rz-secondary.rz-shade-default {
        color: var(--rz-secondary);
    }

    .rz-button.rz-variant-text.rz-secondary.rz-shade-dark {
        color: var(--rz-secondary-dark);
    }

    .rz-button.rz-variant-text.rz-secondary.rz-shade-darker {
        color: var(--rz-secondary-darker);
    }

@media(hover: hover)and (pointer: fine) {
    .rz-button.rz-variant-text.rz-secondary: not(.rz-state-disabled):hover {
        background-color: var(--rz-secondary-lighter);
        color: var(--rz-on-secondary-lighter);
        background-image: none;
        box-shadow: none;
    }
}

.rz-button.rz-variant-text.rz-secondary:not(.rz-state-disabled):active {
    background-color: var(--rz-secondary-lighter);
    color: var(--rz-on-secondary-lighter);
    background-image: none;
    box-shadow: none;
}

.rz-button.rz-variant-text.rz-info {
    background-color: rgba(0, 0, 0, 0);
    box-shadow: none;
}

    .rz-button.rz-variant-text.rz-info.rz-shade-lighter {
        color: var(--rz-info-lighter);
    }

    .rz-button.rz-variant-text.rz-info.rz-shade-light {
        color: var(--rz-info-light);
    }

    .rz-button.rz-variant-text.rz-info.rz-shade-default {
        color: var(--rz-info);
    }

    .rz-button.rz-variant-text.rz-info.rz-shade-dark {
        color: var(--rz-info-dark);
    }

    .rz-button.rz-variant-text.rz-info.rz-shade-darker {
        color: var(--rz-info-darker);
    }

@media(hover: hover)and (pointer: fine) {
    .rz-button.rz-variant-text.rz-info: not(.rz-state-disabled):hover {
        background-color: var(--rz-info-lighter);
        color: var(--rz-on-info-lighter);
        background-image: none;
        box-shadow: none;
    }
}

.rz-button.rz-variant-text.rz-info:not(.rz-state-disabled):active {
    background-color: var(--rz-info-lighter);
    color: var(--rz-on-info-lighter);
    background-image: none;
    box-shadow: none;
}

.rz-button.rz-variant-text.rz-warning {
    background-color: rgba(0, 0, 0, 0);
    box-shadow: none;
}

    .rz-button.rz-variant-text.rz-warning.rz-shade-lighter {
        color: var(--rz-warning-lighter);
    }

    .rz-button.rz-variant-text.rz-warning.rz-shade-light {
        color: var(--rz-warning-light);
    }

    .rz-button.rz-variant-text.rz-warning.rz-shade-default {
        color: var(--rz-warning);
    }

    .rz-button.rz-variant-text.rz-warning.rz-shade-dark {
        color: var(--rz-warning-dark);
    }

    .rz-button.rz-variant-text.rz-warning.rz-shade-darker {
        color: var(--rz-warning-darker);
    }

@media(hover: hover)and (pointer: fine) {
    .rz-button.rz-variant-text.rz-warning: not(.rz-state-disabled):hover {
        background-color: var(--rz-warning-lighter);
        color: var(--rz-on-warning-lighter);
        background-image: none;
        box-shadow: none;
    }
}

.rz-button.rz-variant-text.rz-warning:not(.rz-state-disabled):active {
    background-color: var(--rz-warning-lighter);
    color: var(--rz-on-warning-lighter);
    background-image: none;
    box-shadow: none;
}

.rz-button.rz-variant-text.rz-error {
    background-color: rgba(0, 0, 0, 0);
    box-shadow: none;
}

    .rz-button.rz-variant-text.rz-error.rz-shade-lighter {
        color: var(--rz-error-lighter);
    }

    .rz-button.rz-variant-text.rz-error.rz-shade-light {
        color: var(--rz-error-light);
    }

    .rz-button.rz-variant-text.rz-error.rz-shade-default {
        color: var(--rz-error);
    }

    .rz-button.rz-variant-text.rz-error.rz-shade-dark {
        color: var(--rz-error-dark);
    }

    .rz-button.rz-variant-text.rz-error.rz-shade-darker {
        color: var(--rz-error-darker);
    }

@media(hover: hover)and (pointer: fine) {
    .rz-button.rz-variant-text.rz-error: not(.rz-state-disabled):hover {
        background-color: var(--rz-error-lighter);
        color: var(--rz-on-error-lighter);
        background-image: none;
        box-shadow: none;
    }
}

.rz-button.rz-variant-text.rz-error:not(.rz-state-disabled):active {
    background-color: var(--rz-error-lighter);
    color: var(--rz-on-error-lighter);
    background-image: none;
    box-shadow: none;
}

.rz-button.rz-variant-text.rz-danger {
    background-color: rgba(0, 0, 0, 0);
    box-shadow: none;
}

    .rz-button.rz-variant-text.rz-danger.rz-shade-lighter {
        color: var(--rz-danger-lighter);
    }

    .rz-button.rz-variant-text.rz-danger.rz-shade-light {
        color: var(--rz-danger-light);
    }

    .rz-button.rz-variant-text.rz-danger.rz-shade-default {
        color: var(--rz-danger);
    }

    .rz-button.rz-variant-text.rz-danger.rz-shade-dark {
        color: var(--rz-danger-dark);
    }

    .rz-button.rz-variant-text.rz-danger.rz-shade-darker {
        color: var(--rz-danger-darker);
    }

@media(hover: hover)and (pointer: fine) {
    .rz-button.rz-variant-text.rz-danger: not(.rz-state-disabled):hover {
        background-color: var(--rz-danger-lighter);
        color: var(--rz-on-danger-lighter);
        background-image: none;
        box-shadow: none;
    }
}

.rz-button.rz-variant-text.rz-danger:not(.rz-state-disabled):active {
    background-color: var(--rz-danger-lighter);
    color: var(--rz-on-danger-lighter);
    background-image: none;
    box-shadow: none;
}

.rz-button.rz-variant-text.rz-success {
    background-color: rgba(0, 0, 0, 0);
    box-shadow: none;
}

    .rz-button.rz-variant-text.rz-success.rz-shade-lighter {
        color: var(--rz-success-lighter);
    }

    .rz-button.rz-variant-text.rz-success.rz-shade-light {
        color: var(--rz-success-light);
    }

    .rz-button.rz-variant-text.rz-success.rz-shade-default {
        color: var(--rz-success);
    }

    .rz-button.rz-variant-text.rz-success.rz-shade-dark {
        color: var(--rz-success-dark);
    }

    .rz-button.rz-variant-text.rz-success.rz-shade-darker {
        color: var(--rz-success-darker);
    }

@media(hover: hover)and (pointer: fine) {
    .rz-button.rz-variant-text.rz-success: not(.rz-state-disabled):hover {
        background-color: var(--rz-success-lighter);
        color: var(--rz-on-success-lighter);
        background-image: none;
        box-shadow: none;
    }
}

.rz-button.rz-variant-text.rz-success:not(.rz-state-disabled):active {
    background-color: var(--rz-success-lighter);
    color: var(--rz-on-success-lighter);
    background-image: none;
    box-shadow: none;
}

.rz-button.rz-variant-text.rz-base {
    background-color: rgba(0, 0, 0, 0);
    box-shadow: none;
}

    .rz-button.rz-variant-text.rz-base.rz-shade-lighter {
        color: var(--rz-base-lighter);
    }

    .rz-button.rz-variant-text.rz-base.rz-shade-light {
        color: var(--rz-base-light);
    }

    .rz-button.rz-variant-text.rz-base.rz-shade-default {
        color: inherit;
    }

    .rz-button.rz-variant-text.rz-base.rz-shade-dark {
        color: var(--rz-base-dark);
    }

    .rz-button.rz-variant-text.rz-base.rz-shade-darker {
        color: var(--rz-base-darker);
    }

@media(hover: hover)and (pointer: fine) {
    .rz-button.rz-variant-text.rz-base: not(.rz-state-disabled):hover {
        background-color: var(--rz-base-lighter);
        color: var(--rz-on-base-lighter);
        background-image: none;
        box-shadow: none;
    }
}

.rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):active {
    background-color: var(--rz-base-lighter);
    color: var(--rz-on-base-lighter);
    background-image: none;
    box-shadow: none;
}

.rz-button.rz-variant-text.rz-light {
    color: var(--rz-base-200);
    background-color: rgba(0, 0, 0, 0);
    box-shadow: none;
}

@media(hover: hover)and (pointer: fine) {
    .rz-button.rz-variant-text.rz-light: not(.rz-state-disabled):hover {
        background-color: rgba(255, 255, 255, .12);
        background-image: none;
        box-shadow: none;
    }
}

.rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):active {
    background-color: rgba(255, 255, 255, .12);
    background-image: none;
    box-shadow: none;
}

.rz-button.rz-variant-text.rz-dark {
    color: var(--rz-base-900);
    background-color: rgba(0, 0, 0, 0);
    box-shadow: none;
}

@media(hover: hover)and (pointer: fine) {
    .rz-button.rz-variant-text.rz-dark: not(.rz-state-disabled):hover {
        background-color: rgba(0, 0, 0, .12);
        background-image: none;
        box-shadow: none;
    }
}

.rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):active {
    background-color: rgba(0, 0, 0, .12);
    background-image: none;
    box-shadow: none;
}

.rz-pager-element, .rz-button-lg {
    padding: .75rem 1.5rem;
    height: auto;
    line-height: 1.5rem;
    min-height: 3rem;
    min-width: 3rem;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
}

    .rz-pager-element .rz-button-box, .rz-button-lg .rz-button-box {
        line-height: 1.5rem;
        gap: .25rem;
    }

    .rz-button-icon-left.rz-pager-element, .rz-button-lg.rz-button-icon-left {
        padding: 0 1.375rem;
    }

    .rz-pager-element, .rz-button-lg.rz-button-icon-only {
        padding: .75rem;
    }

        .rz-pager-element .rzi, .rz-button-lg .rzi {
            font-size: 1.5rem;
            height: 1.5rem;
            line-height: 1.5rem;
            width: 1.5rem;
        }

.rz-button-md {
    padding: .625rem 1.5rem;
    height: auto;
    line-height: 1.25rem;
    min-height: 2.5rem;
    min-width: 2.5rem;
    font-size: .875rem;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
}

    .rz-button-md .rz-button-box {
        line-height: 1.25rem;
        gap: .25rem;
    }

    .rz-button-md.rz-button-icon-left {
        padding: 0 1.375rem;
    }

    .rz-button-md.rz-button-icon-only, .rz-button-md.rz-pager-element {
        padding: .625rem;
    }

    .rz-button-md .rzi {
        font-size: 1.25rem;
        height: 1.25rem;
        line-height: 1.25rem;
        width: 1.25rem;
    }

.rz-pager.rz-density-compact .rz-pager-element, .rz-fileupload .rz-button, .rz-button-sm {
    padding: .375rem 1rem;
    height: auto;
    line-height: 1rem;
    min-height: 1.75rem;
    min-width: 1.75rem;
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
}

    .rz-pager.rz-density-compact .rz-pager-element .rz-button-box, .rz-fileupload .rz-button .rz-button-box, .rz-button-sm .rz-button-box {
        line-height: 1rem;
        gap: .25rem;
    }

    .rz-pager.rz-density-compact .rz-button-icon-left.rz-pager-element, .rz-fileupload .rz-button-icon-left.rz-button, .rz-button-sm.rz-button-icon-left {
        padding: 0 1.375rem;
    }

    .rz-pager.rz-density-compact .rz-pager-element, .rz-fileupload .rz-button-icon-only.rz-button, .rz-fileupload .rz-button.rz-pager-element, .rz-button-sm.rz-button-icon-only, .rz-button-sm.rz-pager-element {
        padding: .375rem;
    }

        .rz-pager.rz-density-compact .rz-pager-element .rzi, .rz-fileupload .rz-button .rzi, .rz-button-sm .rzi {
            font-size: 1rem;
            height: 1rem;
            line-height: 1rem;
            width: 1rem;
        }

.rz-button-xs {
    padding: .25rem .75rem;
    height: auto;
    line-height: 1rem;
    min-height: 1.25rem;
    min-width: 1.25rem;
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
}

    .rz-button-xs .rz-button-box {
        line-height: 1rem;
        gap: .125rem;
    }

    .rz-button-xs.rz-button-icon-left {
        padding: 0 1rem;
    }

    .rz-button-xs.rz-button-icon-only, .rz-button-xs.rz-pager-element {
        padding: .25rem;
    }

    .rz-button-xs .rzi {
        font-size: 1rem;
        height: 1rem;
        line-height: 1rem;
        width: 1rem;
    }