:root, :host { --p-button-border-radius: var(--p-form-field-border-radius); --p-button-rounded-border-radius: 2rem; --p-button-gap: 0.5rem; --p-button-padding-x: 1rem; --p-button-padding-y: var(--p-form-field-padding-y); --p-button-icon-only-width: 2.75rem; --p-button-raised-shadow: 0 3px 1px -2px rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12); --p-button-badge-size: 1rem; --p-button-transition-duration: var(--p-form-field-transition-duration); --p-button-focus-ring-width: var(--p-form-field-focus-ring-width); --p-button-focus-ring-style: var(--p-form-field-focus-ring-style); --p-button-focus-ring-offset: var(--p-form-field-focus-ring-offset); --p-button-label-font-weight: 600; --p-button-lg-font-size: var(--p-form-field-lg-font-size); --p-button-lg-padding-x: var(--p-form-field-lg-padding-x); --p-button-lg-padding-y: var(--p-form-field-lg-padding-y); --p-button-lg-icon-only-width: 3.25rem; --p-button-sm-font-size: var(--p-form-field-sm-font-size); --p-button-sm-padding-x: var(--p-form-field-sm-padding-x); --p-button-sm-padding-y: var(--p-form-field-sm-padding-y); --p-button-sm-icon-only-width: 2.25rem; --p-button-link-color: var(--p-primary-color); --p-button-link-hover-color: var(--p-primary-color); --p-button-link-active-color: var(--p-primary-color); --p-button-text-plain-hover-background: var(--p-surface-50); --p-button-text-plain-active-background: var(--p-surface-100); --p-button-text-plain-color: var(--p-surface-700); --p-button-text-contrast-hover-background: var(--p-surface-50); --p-button-text-contrast-active-background: var(--p-surface-100); --p-button-text-contrast-color: var(--p-surface-950); --p-button-text-danger-hover-background: var(--p-red-50); --p-button-text-danger-active-background: var(--p-red-100); --p-button-text-danger-color: var(--p-red-500); --p-button-text-help-hover-background: var(--p-purple-50); --p-button-text-help-active-background: var(--p-purple-100); --p-button-text-help-color: var(--p-purple-500); --p-button-text-warn-hover-background: var(--p-orange-50); --p-button-text-warn-active-background: var(--p-orange-100); --p-button-text-warn-color: var(--p-orange-500); --p-button-text-info-hover-background: var(--p-sky-50); --p-button-text-info-active-background: var(--p-sky-100); --p-button-text-info-color: var(--p-sky-500); --p-button-text-success-hover-background: var(--p-green-50); --p-button-text-success-active-background: var(--p-green-100); --p-button-text-success-color: var(--p-green-500); --p-button-text-secondary-hover-background: var(--p-surface-100); --p-button-text-secondary-active-background: var(--p-surface-200); --p-button-text-secondary-color: var(--p-surface-600); --p-button-text-primary-hover-background: var(--p-primary-50); --p-button-text-primary-active-background: var(--p-primary-100); --p-button-text-primary-color: var(--p-primary-color); --p-button-outlined-plain-hover-background: var(--p-surface-50); --p-button-outlined-plain-active-background: var(--p-surface-100); --p-button-outlined-plain-border-color: var(--p-surface-200); --p-button-outlined-plain-color: var(--p-surface-700); --p-button-outlined-contrast-hover-background: var(--p-surface-50); --p-button-outlined-contrast-active-background: var(--p-surface-100); --p-button-outlined-contrast-border-color: var(--p-surface-700); --p-button-outlined-contrast-color: var(--p-surface-950); --p-button-outlined-danger-hover-background: var(--p-red-50); --p-button-outlined-danger-active-background: var(--p-red-100); --p-button-outlined-danger-border-color: var(--p-red-200); --p-button-outlined-danger-color: var(--p-red-500); --p-button-outlined-help-hover-background: var(--p-purple-50); --p-button-outlined-help-active-background: var(--p-purple-100); --p-button-outlined-help-border-color: var(--p-purple-200); --p-button-outlined-help-color: var(--p-purple-500); --p-button-outlined-warn-hover-background: var(--p-orange-50); --p-button-outlined-warn-active-background: var(--p-orange-100); --p-button-outlined-warn-border-color: var(--p-orange-200); --p-button-outlined-warn-color: var(--p-orange-500); --p-button-outlined-info-hover-background: var(--p-sky-50); --p-button-outlined-info-active-background: var(--p-sky-100); --p-button-outlined-info-border-color: var(--p-sky-200); --p-button-outlined-info-color: var(--p-sky-500); --p-button-outlined-success-hover-background: var(--p-green-50); --p-button-outlined-success-active-background: var(--p-green-100); --p-button-outlined-success-border-color: var(--p-green-200); --p-button-outlined-success-color: var(--p-green-500); --p-button-outlined-secondary-hover-background: var(--p-surface-50); --p-button-outlined-secondary-active-background: var(--p-surface-100); --p-button-outlined-secondary-border-color: var(--p-surface-200); --p-button-outlined-secondary-color: var(--p-surface-500); --p-button-outlined-primary-hover-background: var(--p-primary-50); --p-button-outlined-primary-active-background: var(--p-primary-100); --p-button-outlined-primary-border-color: var(--p-primary-200); --p-button-outlined-primary-color: var(--p-primary-color); --p-button-contrast-background: var(--p-surface-950); --p-button-contrast-hover-background: var(--p-surface-900); --p-button-contrast-active-background: var(--p-surface-800); --p-button-contrast-border-color: var(--p-surface-950); --p-button-contrast-hover-border-color: var(--p-surface-900); --p-button-contrast-active-border-color: var(--p-surface-800); --p-button-contrast-color: var(--p-surface-0); --p-button-contrast-hover-color: var(--p-surface-0); --p-button-contrast-active-color: var(--p-surface-0); --p-button-contrast-focus-ring-color: transparent; --p-button-contrast-focus-ring-shadow: 0 0 0 0.2rem var(--p-surface-400); --p-button-danger-background: var(--p-red-500); --p-button-danger-hover-background: var(--p-red-600); --p-button-danger-active-background: var(--p-red-700); --p-button-danger-border-color: var(--p-red-500); --p-button-danger-hover-border-color: var(--p-red-600); --p-button-danger-active-border-color: var(--p-red-700); --p-button-danger-color: #ffffff; --p-button-danger-hover-color: #ffffff; --p-button-danger-active-color: #ffffff; --p-button-danger-focus-ring-color: transparent; --p-button-danger-focus-ring-shadow: 0 0 0 0.2rem var(--p-red-200); --p-button-help-background: var(--p-purple-500); --p-button-help-hover-background: var(--p-purple-600); --p-button-help-active-background: var(--p-purple-700); --p-button-help-border-color: var(--p-purple-500); --p-button-help-hover-border-color: var(--p-purple-600); --p-button-help-active-border-color: var(--p-purple-700); --p-button-help-color: #ffffff; --p-button-help-hover-color: #ffffff; --p-button-help-active-color: #ffffff; --p-button-help-focus-ring-color: transparent; --p-button-help-focus-ring-shadow: 0 0 0 0.2rem var(--p-purple-200); --p-button-warn-background: var(--p-orange-500); --p-button-warn-hover-background: var(--p-orange-600); --p-button-warn-active-background: var(--p-orange-700); --p-button-warn-border-color: var(--p-orange-500); --p-button-warn-hover-border-color: var(--p-orange-600); --p-button-warn-active-border-color: var(--p-orange-700); --p-button-warn-color: #ffffff; --p-button-warn-hover-color: #ffffff; --p-button-warn-active-color: #ffffff; --p-button-warn-focus-ring-color: transparent; --p-button-warn-focus-ring-shadow: 0 0 0 0.2rem var(--p-orange-200); --p-button-success-background: var(--p-green-500); --p-button-success-hover-background: var(--p-green-600); --p-button-success-active-background: var(--p-green-700); --p-button-success-border-color: var(--p-green-500); --p-button-success-hover-border-color: var(--p-green-600); --p-button-success-active-border-color: var(--p-green-700); --p-button-success-color: #ffffff; --p-button-success-hover-color: #ffffff; --p-button-success-active-color: #ffffff; --p-button-success-focus-ring-color: transparent; --p-button-success-focus-ring-shadow: 0 0 0 0.2rem var(--p-green-200); --p-button-info-background: var(--p-sky-500); --p-button-info-hover-background: var(--p-sky-600); --p-button-info-active-background: var(--p-sky-700); --p-button-info-border-color: var(--p-sky-500); --p-button-info-hover-border-color: var(--p-sky-600); --p-button-info-active-border-color: var(--p-sky-700); --p-button-info-color: #ffffff; --p-button-info-hover-color: #ffffff; --p-button-info-active-color: #ffffff; --p-button-info-focus-ring-color: transparent; --p-button-info-focus-ring-shadow: 0 0 0 0.2rem var(--p-sky-200); --p-button-secondary-background: var(--p-surface-100); --p-button-secondary-hover-background: var(--p-surface-200); --p-button-secondary-active-background: var(--p-surface-300); --p-button-secondary-border-color: var(--p-surface-100); --p-button-secondary-hover-border-color: var(--p-surface-200); --p-button-secondary-active-border-color: var(--p-surface-300); --p-button-secondary-color: var(--p-surface-600); --p-button-secondary-hover-color: var(--p-surface-700); --p-button-secondary-active-color: var(--p-surface-800); --p-button-secondary-focus-ring-color: transparent; --p-button-secondary-focus-ring-shadow: 0 0 0 0.2rem var(--p-surface-200); --p-button-primary-background: var(--p-primary-color); --p-button-primary-hover-background: var(--p-primary-hover-color); --p-button-primary-active-background: var(--p-primary-active-color); --p-button-primary-border-color: var(--p-primary-color); --p-button-primary-hover-border-color: var(--p-primary-hover-color); --p-button-primary-active-border-color: var(--p-primary-active-color); --p-button-primary-color: var(--p-primary-contrast-color); --p-button-primary-hover-color: var(--p-primary-contrast-color); --p-button-primary-active-color: var(--p-primary-contrast-color); --p-button-primary-focus-ring-color: transparent; --p-button-primary-focus-ring-shadow: 0 0 0 0.2rem var(--p-primary-200); }