@adcops/autocore-react 3.3.8 → 3.3.10

package/src/themes/theme-base/components/button/_button.scss

@@ -1,644 +1,644 @@
-.p-button {
-    color: $buttonTextColor;
-    background: $buttonBg;
-    border: $buttonBorder;
-    padding: $buttonPadding;
-    font-size: $fontSize;
-    transition: $formElementTransition;
-    border-radius: $borderRadius;
-
-    &:not(:disabled):hover {
-        background: $buttonHoverBg;
-        color: $buttonTextHoverColor;
-        border-color: $buttonHoverBorderColor;
-    }
-
-    &:not(:disabled):active {
-        background: $buttonActiveBg;
-        color: $buttonTextActiveColor;
-        border-color: $buttonActiveBorderColor;
-    }
-
-    &.p-button-outlined {
-        background-color: transparent;
-        color: $buttonBg;
-        border: $outlinedButtonBorder;
-
-        &:not(:disabled):hover {
-            background: rgba($buttonBg, $textButtonHoverBgOpacity);
-            color: $buttonBg;
-            border: $outlinedButtonBorder;
-        }
-
-        &:not(:disabled):active {
-            background: rgba($buttonBg, $textButtonActiveBgOpacity);
-            color: $buttonBg;
-            border: $outlinedButtonBorder;
-        }
-
-        &.p-button-plain {
-            color: $plainButtonTextColor;
-            border-color: $plainButtonTextColor;
-
-            &:not(:disabled):hover {
-                background: $plainButtonHoverBgColor;
-                color: $plainButtonTextColor;
-            }
-    
-            &:not(:disabled):active {
-                background: $plainButtonActiveBgColor;
-                color: $plainButtonTextColor;
-            }
-        }
-    }
-
-    &.p-button-text {
-        background-color: transparent;
-        color: $buttonBg;
-        border-color: transparent;
-
-        &:not(:disabled):hover {
-            background: rgba($buttonBg, $textButtonHoverBgOpacity);
-            color: $buttonBg;
-            border-color: transparent;
-        }
-
-        &:not(:disabled):active {
-            background: rgba($buttonBg, $textButtonActiveBgOpacity);
-            color: $buttonBg;
-            border-color: transparent;
-        }
-
-        &.p-button-plain {
-            color: $plainButtonTextColor;
-
-            &:not(:disabled):hover {
-                background: $plainButtonHoverBgColor;
-                color: $plainButtonTextColor;
-            }
-    
-            &:not(:disabled):active {
-                background: $plainButtonActiveBgColor;
-                color: $plainButtonTextColor;
-            }
-        }
-    }
-
-    &:focus {
-        @include focused();
-    }
-
-    .p-button-label {
-        transition-duration: $transitionDuration;
-    }
-
-    .p-button-icon-left {
-         margin-right: $inlineSpacing;
-    }
-
-    .p-button-icon-right {
-        margin-left: $inlineSpacing;
-    }
-
-    .p-button-icon-bottom {
-        margin-top: $inlineSpacing;
-    }
-
-    .p-button-icon-top {
-       margin-bottom: $inlineSpacing;
-    }
-
-    .p-badge {
-        margin-left: $inlineSpacing;
-        min-width: $fontSize;
-        height: $fontSize;
-        line-height: $fontSize;
-        color: $buttonBg;
-        background-color: $buttonTextColor;
-    }
-
-    &.p-button-raised {
-        box-shadow: $raisedButtonShadow;
-    }
-
-    &.p-button-rounded {
-        border-radius: $roundedButtonBorderRadius;
-    }
-
-    &.p-button-icon-only {
-        width: $buttonIconOnlyWidth;
-        padding: $buttonIconOnlyPadding;
-
-        .p-button-icon-left,
-        .p-button-icon-right {
-            margin: 0;
-        }
-
-        &.p-button-rounded {
-            border-radius: 50%;
-            height: $buttonIconOnlyWidth;
-        }
-    }
-
-    &.p-button-sm {
-        @include scaledFontSize($fontSize, $scaleSM);
-        @include scaledPadding($buttonPadding, $scaleSM);
-
-        .p-button-icon {
-            @include scaledFontSize($primeIconFontSize, $scaleSM);
-        }
-    }
-
-    &.p-button-lg {
-        @include scaledFontSize($fontSize, $scaleLG);
-        @include scaledPadding($buttonPadding, $scaleLG);
-
-        .p-button-icon {
-            @include scaledFontSize($primeIconFontSize, $scaleLG);
-        }
-    }
-
-    &.p-button-loading-label-only {
-        &.p-button-loading-left {
-            .p-button-label {
-                margin-left: $inlineSpacing;
-            }
-        }
-        
-        &.p-button-loading-right {
-            .p-button-label {
-                margin-right: $inlineSpacing;
-            }
-        }
-
-        &.p-button-loading-top {
-            .p-button-label {
-                margin-top: $inlineSpacing;
-            }
-        }
-
-        &.p-button-loading-bottom {
-            .p-button-label {
-                margin-bottom: $inlineSpacing;
-            }
-        }
-
-        .p-button-loading-icon {
-            margin: 0;
-        }
-    }
-}
-
-.p-fluid {
-    .p-button {
-        width: 100%;
-    }
-    
-    .p-button-icon-only {
-        width: $buttonIconOnlyWidth;
-    }
-
-    .p-button-group {
-        display: flex;
-        
-        .p-button {
-            flex: 1;
-        }
-    }
-}
-
-.p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
-    color: $secondaryButtonTextColor;
-    background: $secondaryButtonBg;
-    border: $secondaryButtonBorder;
-
-    &:not(:disabled):hover {
-        background: $secondaryButtonHoverBg;
-        color: $secondaryButtonTextHoverColor;
-        border-color: $secondaryButtonHoverBorderColor;
-    }
-
-    &:not(:disabled):focus {
-        box-shadow: $secondaryButtonFocusShadow;
-    }
-
-    &:not(:disabled):active {
-        background: $secondaryButtonActiveBg;
-        color: $secondaryButtonTextActiveColor;
-        border-color: $secondaryButtonActiveBorderColor;
-    }
-    
-    &.p-button-outlined {
-        background-color: transparent;
-        color: $secondaryButtonBg;
-        border: $outlinedButtonBorder;
-
-        &:not(:disabled):hover {
-            background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity);
-            color: $secondaryButtonBg;
-            border: $outlinedButtonBorder;
-        }
-
-        &:not(:disabled):active {
-            background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity);
-            color: $secondaryButtonBg;
-            border: $outlinedButtonBorder;
-        }
-    }
-
-    &.p-button-text {
-        background-color: transparent;
-        color: $secondaryButtonBg;
-        border-color: transparent;
-
-        &:not(:disabled):hover {
-            background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity);
-            border-color: transparent;
-            color: $secondaryButtonBg;
-        }
-
-        &:not(:disabled):active {
-            background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity);
-            border-color: transparent;
-            color: $secondaryButtonBg;
-        }
-    }
-}
-
-.p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
-    color: $infoButtonTextColor;
-    background: $infoButtonBg;
-    border: $infoButtonBorder;
-
-    &:not(:disabled):hover {
-        background: $infoButtonHoverBg;
-        color: $infoButtonTextHoverColor;
-        border-color: $infoButtonHoverBorderColor;
-    }
-
-    &:not(:disabled):focus {
-        box-shadow: $infoButtonFocusShadow;
-    }
-
-    &:not(:disabled):active {
-        background: $infoButtonActiveBg;
-        color: $infoButtonTextActiveColor;
-        border-color: $infoButtonActiveBorderColor;
-    }
-
-    &.p-button-outlined {
-        background-color: transparent;
-        color: $infoButtonBg;
-        border: $outlinedButtonBorder;
-
-        &:not(:disabled):hover {
-            background: rgba($infoButtonBg, $textButtonHoverBgOpacity);
-            color: $infoButtonBg;
-            border: $outlinedButtonBorder;
-        }
-
-        &:not(:disabled):active {
-            background: rgba($infoButtonBg, $textButtonActiveBgOpacity);
-            color: $infoButtonBg;
-            border: $outlinedButtonBorder;
-        }
-    }
-
-    &.p-button-text {
-        background-color: transparent;
-        color: $infoButtonBg;
-        border-color: transparent;
-
-        &:not(:disabled):hover {
-            background: rgba($infoButtonBg, $textButtonHoverBgOpacity);
-            border-color: transparent;
-            color: $infoButtonBg;
-        }
-
-        &:not(:disabled):active {
-            background: rgba($infoButtonBg, $textButtonActiveBgOpacity);
-            border-color: transparent;
-            color: $infoButtonBg;
-        }
-    }
-}
-
-.p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
-    color: $successButtonTextColor;
-    background: $successButtonBg;
-    border: $successButtonBorder;
-
-    &:not(:disabled):hover {
-        background: $successButtonHoverBg;
-        color: $successButtonTextHoverColor;
-        border-color: $successButtonHoverBorderColor;
-    }
-
-    &:not(:disabled):focus {
-        box-shadow: $successButtonFocusShadow;
-    }
-
-    &:not(:disabled):active {
-        background: $successButtonActiveBg;
-        color: $successButtonTextActiveColor;
-        border-color: $successButtonActiveBorderColor;
-    }
-
-    &.p-button-outlined {
-        background-color: transparent;
-        color: $successButtonBg;
-        border: $outlinedButtonBorder;
-
-        &:not(:disabled):hover {
-            background: rgba($successButtonBg, $textButtonHoverBgOpacity);
-            color: $successButtonBg;
-            border: $outlinedButtonBorder;
-        }
-
-        &:not(:disabled):active {
-            background: rgba($successButtonBg, $textButtonActiveBgOpacity);
-            color: $successButtonBg;
-            border: $outlinedButtonBorder;
-        }
-    }
-
-    &.p-button-text {
-        background-color: transparent;
-        color: $successButtonBg;
-        border-color: transparent;
-
-        &:not(:disabled):hover {
-            background: rgba($successButtonBg, $textButtonHoverBgOpacity);
-            border-color: transparent;
-            color: $successButtonBg;
-        }
-
-        &:not(:disabled):active {
-            background: rgba($successButtonBg, $textButtonActiveBgOpacity);
-            border-color: transparent;
-            color: $successButtonBg;
-        }
-    }
-}
-
-.p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
-    color: $warningButtonTextColor;
-    background: $warningButtonBg;
-    border: $warningButtonBorder;
-    
-    &:not(:disabled):hover {
-        background: $warningButtonHoverBg;
-        color: $warningButtonTextHoverColor;
-        border-color: $warningButtonHoverBorderColor;
-    }
-
-    &:not(:disabled):focus {
-        box-shadow: $warningButtonFocusShadow;
-    }
-
-    &:not(:disabled):active {
-        background: $warningButtonActiveBg;
-        color: $warningButtonTextActiveColor;
-        border-color: $warningButtonActiveBorderColor;
-    }
-
-    &.p-button-outlined {
-        background-color: transparent;
-        color: $warningButtonBg;
-        border: $outlinedButtonBorder;
-
-        &:not(:disabled):hover {
-            background: rgba($warningButtonBg, $textButtonHoverBgOpacity);
-            color: $warningButtonBg;
-            border: $outlinedButtonBorder;
-        }
-
-        &:not(:disabled):active {
-            background: rgba($warningButtonBg, $textButtonActiveBgOpacity);
-            color: $warningButtonBg;
-            border: $outlinedButtonBorder;
-        }
-    }
-
-    &.p-button-text {
-        background-color: transparent;
-        color: $warningButtonBg;
-        border-color: transparent;
-
-        &:not(:disabled):hover {
-            background: rgba($warningButtonBg, $textButtonHoverBgOpacity);
-            border-color: transparent;
-            color: $warningButtonBg;
-        }
-
-        &:not(:disabled):active {
-            background: rgba($warningButtonBg, $textButtonActiveBgOpacity);
-            border-color: transparent;
-            color: $warningButtonBg;
-        }
-    }
-}
-
-.p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
-    color: $helpButtonTextColor;
-    background: $helpButtonBg;
-    border: $helpButtonBorder;
-
-    &:not(:disabled):hover {
-        background: $helpButtonHoverBg;
-        color: $helpButtonTextHoverColor;
-        border-color: $helpButtonHoverBorderColor;
-    }
-
-    &:not(:disabled):focus {
-        box-shadow: $helpButtonFocusShadow;
-    }
-
-    &:not(:disabled):active {
-        background: $helpButtonActiveBg;
-        color: $helpButtonTextActiveColor;
-        border-color: $helpButtonActiveBorderColor;
-    }
-
-    &.p-button-outlined {
-        background-color: transparent;
-        color: $helpButtonBg;
-        border: $outlinedButtonBorder;
-
-        &:not(:disabled):hover {
-            background: rgba($helpButtonBg, $textButtonHoverBgOpacity);
-            color: $helpButtonBg;
-            border: $outlinedButtonBorder;
-        }
-
-        &:not(:disabled):active {
-            background: rgba($helpButtonBg, $textButtonActiveBgOpacity);
-            color: $helpButtonBg;
-            border: $outlinedButtonBorder;
-        }
-    }
-
-    &.p-button-text {
-        background-color: transparent;
-        color: $helpButtonBg;
-        border-color: transparent;
-
-        &:not(:disabled):hover {
-            background: rgba($helpButtonBg, $textButtonHoverBgOpacity);
-            border-color: transparent;
-            color: $helpButtonBg;
-        }
-
-        &:not(:disabled):active {
-            background: rgba($helpButtonBg, $textButtonActiveBgOpacity);
-            border-color: transparent;
-            color: $helpButtonBg;
-        }
-    }
-}
-
-.p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
-    color: $dangerButtonTextColor;
-    background: $dangerButtonBg;
-    border: $dangerButtonBorder;
-
-    &:not(:disabled):hover {
-        background: $dangerButtonHoverBg;
-        color: $dangerButtonTextHoverColor;
-        border-color: $dangerButtonHoverBorderColor;
-    }
-
-    &:not(:disabled):focus {
-        box-shadow: $dangerButtonFocusShadow;
-    }
-
-    &:not(:disabled):active {
-        background: $dangerButtonActiveBg;
-        color: $dangerButtonTextActiveColor;
-        border-color: $dangerButtonActiveBorderColor;
-    }
-
-    &.p-button-outlined {
-        background-color: transparent;
-        color: $dangerButtonBg;
-        border: $outlinedButtonBorder;
-
-        &:not(:disabled):hover {
-            background: rgba($dangerButtonBg, $textButtonHoverBgOpacity);
-            color: $dangerButtonBg;
-            border: $outlinedButtonBorder;
-        }
-
-        &:not(:disabled):active {
-            background: rgba($dangerButtonBg, $textButtonActiveBgOpacity);
-            color: $dangerButtonBg;
-            border: $outlinedButtonBorder;
-        }
-    }
-
-    &.p-button-text {
-        background-color: transparent;
-        color: $dangerButtonBg;
-        border-color: transparent;
-
-        &:not(:disabled):hover {
-            background: rgba($dangerButtonBg, $textButtonHoverBgOpacity);
-            border-color: transparent;
-            color: $dangerButtonBg;
-        }
-
-        &:not(:disabled):active {
-            background: rgba($dangerButtonBg, $textButtonActiveBgOpacity);
-            border-color: transparent;
-            color: $dangerButtonBg;
-        }
-    }
-}
-
-@if variable-exists(contrastButtonTextColor) {
-    .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
-        color: $contrastButtonTextColor;
-        background: $contrastButtonBg;
-        border: $contrastButtonBorder;
-    
-        &:not(:disabled):hover {
-            background: $contrastButtonHoverBg;
-            color: $contrastButtonTextHoverColor;
-            border-color: $contrastButtonHoverBorderColor;
-        }
-    
-        &:not(:disabled):focus {
-            box-shadow: $contrastButtonFocusShadow;
-        }
-    
-        &:not(:disabled):active {
-            background: $contrastButtonActiveBg;
-            color: $contrastButtonTextActiveColor;
-            border-color: $contrastButtonActiveBorderColor;
-        }
-    
-        &.p-button-outlined {
-            background-color: transparent;
-            color: $contrastButtonBg;
-            border: $outlinedButtonBorder;
-    
-            &:not(:disabled):hover {
-                background: rgba($contrastButtonBg, $textButtonHoverBgOpacity);
-                color: $contrastButtonBg;
-                border: $outlinedButtonBorder;
-            }
-    
-            &:not(:disabled):active {
-                background: rgba($contrastButtonBg, $textButtonActiveBgOpacity);
-                color: $contrastButtonBg;
-                border: $outlinedButtonBorder;
-            }
-        }
-    
-        &.p-button-text {
-            background-color: transparent;
-            color: $contrastButtonBg;
-            border-color: transparent;
-    
-            &:not(:disabled):hover {
-                background: rgba($contrastButtonBg, $textButtonHoverBgOpacity);
-                border-color: transparent;
-                color: $contrastButtonBg;
-            }
-    
-            &:not(:disabled):active {
-                background: rgba($contrastButtonBg, $textButtonActiveBgOpacity);
-                border-color: transparent;
-                color: $contrastButtonBg;
-            }
-        }
-    }
-}
-
-.p-button.p-button-link {
-    color: $linkButtonColor;
-    background: transparent;
-    border: transparent;
-
-    &:not(:disabled):hover {
-        background:  transparent;
-        color: $linkButtonHoverColor;
-        border-color:  transparent;
-
-        .p-button-label {
-            text-decoration: $linkButtonTextHoverDecoration;
-        }
-    }
-
-    &:not(:disabled):focus {
-        background: transparent;
-        box-shadow: $linkButtonFocusShadow;
-        border-color:  transparent;
-    }
-
-    &:not(:disabled):active {
-        background:  transparent;
-        color: $linkButtonColor;
-        border-color:  transparent;
-    }
-}
+.p-button {
+    color: $buttonTextColor;
+    background: $buttonBg;
+    border: $buttonBorder;
+    padding: $buttonPadding;
+    font-size: $fontSize;
+    transition: $formElementTransition;
+    border-radius: $borderRadius;
+
+    &:not(:disabled):hover {
+        background: $buttonHoverBg;
+        color: $buttonTextHoverColor;
+        border-color: $buttonHoverBorderColor;
+    }
+
+    &:not(:disabled):active {
+        background: $buttonActiveBg;
+        color: $buttonTextActiveColor;
+        border-color: $buttonActiveBorderColor;
+    }
+
+    &.p-button-outlined {
+        background-color: transparent;
+        color: $buttonBg;
+        border: $outlinedButtonBorder;
+
+        &:not(:disabled):hover {
+            background: rgba($buttonBg, $textButtonHoverBgOpacity);
+            color: $buttonBg;
+            border: $outlinedButtonBorder;
+        }
+
+        &:not(:disabled):active {
+            background: rgba($buttonBg, $textButtonActiveBgOpacity);
+            color: $buttonBg;
+            border: $outlinedButtonBorder;
+        }
+
+        &.p-button-plain {
+            color: $plainButtonTextColor;
+            border-color: $plainButtonTextColor;
+
+            &:not(:disabled):hover {
+                background: $plainButtonHoverBgColor;
+                color: $plainButtonTextColor;
+            }
+    
+            &:not(:disabled):active {
+                background: $plainButtonActiveBgColor;
+                color: $plainButtonTextColor;
+            }
+        }
+    }
+
+    &.p-button-text {
+        background-color: transparent;
+        color: $buttonBg;
+        border-color: transparent;
+
+        &:not(:disabled):hover {
+            background: rgba($buttonBg, $textButtonHoverBgOpacity);
+            color: $buttonBg;
+            border-color: transparent;
+        }
+
+        &:not(:disabled):active {
+            background: rgba($buttonBg, $textButtonActiveBgOpacity);
+            color: $buttonBg;
+            border-color: transparent;
+        }
+
+        &.p-button-plain {
+            color: $plainButtonTextColor;
+
+            &:not(:disabled):hover {
+                background: $plainButtonHoverBgColor;
+                color: $plainButtonTextColor;
+            }
+    
+            &:not(:disabled):active {
+                background: $plainButtonActiveBgColor;
+                color: $plainButtonTextColor;
+            }
+        }
+    }
+
+    &:focus {
+        @include focused();
+    }
+
+    .p-button-label {
+        transition-duration: $transitionDuration;
+    }
+
+    .p-button-icon-left {
+         margin-right: $inlineSpacing;
+    }
+
+    .p-button-icon-right {
+        margin-left: $inlineSpacing;
+    }
+
+    .p-button-icon-bottom {
+        margin-top: $inlineSpacing;
+    }
+
+    .p-button-icon-top {
+       margin-bottom: $inlineSpacing;
+    }
+
+    .p-badge {
+        margin-left: $inlineSpacing;
+        min-width: $fontSize;
+        height: $fontSize;
+        line-height: $fontSize;
+        color: $buttonBg;
+        background-color: $buttonTextColor;
+    }
+
+    &.p-button-raised {
+        box-shadow: $raisedButtonShadow;
+    }
+
+    &.p-button-rounded {
+        border-radius: $roundedButtonBorderRadius;
+    }
+
+    &.p-button-icon-only {
+        width: $buttonIconOnlyWidth;
+        padding: $buttonIconOnlyPadding;
+
+        .p-button-icon-left,
+        .p-button-icon-right {
+            margin: 0;
+        }
+
+        &.p-button-rounded {
+            border-radius: 50%;
+            height: $buttonIconOnlyWidth;
+        }
+    }
+
+    &.p-button-sm {
+        @include scaledFontSize($fontSize, $scaleSM);
+        @include scaledPadding($buttonPadding, $scaleSM);
+
+        .p-button-icon {
+            @include scaledFontSize($primeIconFontSize, $scaleSM);
+        }
+    }
+
+    &.p-button-lg {
+        @include scaledFontSize($fontSize, $scaleLG);
+        @include scaledPadding($buttonPadding, $scaleLG);
+
+        .p-button-icon {
+            @include scaledFontSize($primeIconFontSize, $scaleLG);
+        }
+    }
+
+    &.p-button-loading-label-only {
+        &.p-button-loading-left {
+            .p-button-label {
+                margin-left: $inlineSpacing;
+            }
+        }
+        
+        &.p-button-loading-right {
+            .p-button-label {
+                margin-right: $inlineSpacing;
+            }
+        }
+
+        &.p-button-loading-top {
+            .p-button-label {
+                margin-top: $inlineSpacing;
+            }
+        }
+
+        &.p-button-loading-bottom {
+            .p-button-label {
+                margin-bottom: $inlineSpacing;
+            }
+        }
+
+        .p-button-loading-icon {
+            margin: 0;
+        }
+    }
+}
+
+.p-fluid {
+    .p-button {
+        width: 100%;
+    }
+    
+    .p-button-icon-only {
+        width: $buttonIconOnlyWidth;
+    }
+
+    .p-button-group {
+        display: flex;
+        
+        .p-button {
+            flex: 1;
+        }
+    }
+}
+
+.p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+    color: $secondaryButtonTextColor;
+    background: $secondaryButtonBg;
+    border: $secondaryButtonBorder;
+
+    &:not(:disabled):hover {
+        background: $secondaryButtonHoverBg;
+        color: $secondaryButtonTextHoverColor;
+        border-color: $secondaryButtonHoverBorderColor;
+    }
+
+    &:not(:disabled):focus {
+        box-shadow: $secondaryButtonFocusShadow;
+    }
+
+    &:not(:disabled):active {
+        background: $secondaryButtonActiveBg;
+        color: $secondaryButtonTextActiveColor;
+        border-color: $secondaryButtonActiveBorderColor;
+    }
+    
+    &.p-button-outlined {
+        background-color: transparent;
+        color: $secondaryButtonBg;
+        border: $outlinedButtonBorder;
+
+        &:not(:disabled):hover {
+            background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity);
+            color: $secondaryButtonBg;
+            border: $outlinedButtonBorder;
+        }
+
+        &:not(:disabled):active {
+            background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity);
+            color: $secondaryButtonBg;
+            border: $outlinedButtonBorder;
+        }
+    }
+
+    &.p-button-text {
+        background-color: transparent;
+        color: $secondaryButtonBg;
+        border-color: transparent;
+
+        &:not(:disabled):hover {
+            background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity);
+            border-color: transparent;
+            color: $secondaryButtonBg;
+        }
+
+        &:not(:disabled):active {
+            background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity);
+            border-color: transparent;
+            color: $secondaryButtonBg;
+        }
+    }
+}
+
+.p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+    color: $infoButtonTextColor;
+    background: $infoButtonBg;
+    border: $infoButtonBorder;
+
+    &:not(:disabled):hover {
+        background: $infoButtonHoverBg;
+        color: $infoButtonTextHoverColor;
+        border-color: $infoButtonHoverBorderColor;
+    }
+
+    &:not(:disabled):focus {
+        box-shadow: $infoButtonFocusShadow;
+    }
+
+    &:not(:disabled):active {
+        background: $infoButtonActiveBg;
+        color: $infoButtonTextActiveColor;
+        border-color: $infoButtonActiveBorderColor;
+    }
+
+    &.p-button-outlined {
+        background-color: transparent;
+        color: $infoButtonBg;
+        border: $outlinedButtonBorder;
+
+        &:not(:disabled):hover {
+            background: rgba($infoButtonBg, $textButtonHoverBgOpacity);
+            color: $infoButtonBg;
+            border: $outlinedButtonBorder;
+        }
+
+        &:not(:disabled):active {
+            background: rgba($infoButtonBg, $textButtonActiveBgOpacity);
+            color: $infoButtonBg;
+            border: $outlinedButtonBorder;
+        }
+    }
+
+    &.p-button-text {
+        background-color: transparent;
+        color: $infoButtonBg;
+        border-color: transparent;
+
+        &:not(:disabled):hover {
+            background: rgba($infoButtonBg, $textButtonHoverBgOpacity);
+            border-color: transparent;
+            color: $infoButtonBg;
+        }
+
+        &:not(:disabled):active {
+            background: rgba($infoButtonBg, $textButtonActiveBgOpacity);
+            border-color: transparent;
+            color: $infoButtonBg;
+        }
+    }
+}
+
+.p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+    color: $successButtonTextColor;
+    background: $successButtonBg;
+    border: $successButtonBorder;
+
+    &:not(:disabled):hover {
+        background: $successButtonHoverBg;
+        color: $successButtonTextHoverColor;
+        border-color: $successButtonHoverBorderColor;
+    }
+
+    &:not(:disabled):focus {
+        box-shadow: $successButtonFocusShadow;
+    }
+
+    &:not(:disabled):active {
+        background: $successButtonActiveBg;
+        color: $successButtonTextActiveColor;
+        border-color: $successButtonActiveBorderColor;
+    }
+
+    &.p-button-outlined {
+        background-color: transparent;
+        color: $successButtonBg;
+        border: $outlinedButtonBorder;
+
+        &:not(:disabled):hover {
+            background: rgba($successButtonBg, $textButtonHoverBgOpacity);
+            color: $successButtonBg;
+            border: $outlinedButtonBorder;
+        }
+
+        &:not(:disabled):active {
+            background: rgba($successButtonBg, $textButtonActiveBgOpacity);
+            color: $successButtonBg;
+            border: $outlinedButtonBorder;
+        }
+    }
+
+    &.p-button-text {
+        background-color: transparent;
+        color: $successButtonBg;
+        border-color: transparent;
+
+        &:not(:disabled):hover {
+            background: rgba($successButtonBg, $textButtonHoverBgOpacity);
+            border-color: transparent;
+            color: $successButtonBg;
+        }
+
+        &:not(:disabled):active {
+            background: rgba($successButtonBg, $textButtonActiveBgOpacity);
+            border-color: transparent;
+            color: $successButtonBg;
+        }
+    }
+}
+
+.p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+    color: $warningButtonTextColor;
+    background: $warningButtonBg;
+    border: $warningButtonBorder;
+    
+    &:not(:disabled):hover {
+        background: $warningButtonHoverBg;
+        color: $warningButtonTextHoverColor;
+        border-color: $warningButtonHoverBorderColor;
+    }
+
+    &:not(:disabled):focus {
+        box-shadow: $warningButtonFocusShadow;
+    }
+
+    &:not(:disabled):active {
+        background: $warningButtonActiveBg;
+        color: $warningButtonTextActiveColor;
+        border-color: $warningButtonActiveBorderColor;
+    }
+
+    &.p-button-outlined {
+        background-color: transparent;
+        color: $warningButtonBg;
+        border: $outlinedButtonBorder;
+
+        &:not(:disabled):hover {
+            background: rgba($warningButtonBg, $textButtonHoverBgOpacity);
+            color: $warningButtonBg;
+            border: $outlinedButtonBorder;
+        }
+
+        &:not(:disabled):active {
+            background: rgba($warningButtonBg, $textButtonActiveBgOpacity);
+            color: $warningButtonBg;
+            border: $outlinedButtonBorder;
+        }
+    }
+
+    &.p-button-text {
+        background-color: transparent;
+        color: $warningButtonBg;
+        border-color: transparent;
+
+        &:not(:disabled):hover {
+            background: rgba($warningButtonBg, $textButtonHoverBgOpacity);
+            border-color: transparent;
+            color: $warningButtonBg;
+        }
+
+        &:not(:disabled):active {
+            background: rgba($warningButtonBg, $textButtonActiveBgOpacity);
+            border-color: transparent;
+            color: $warningButtonBg;
+        }
+    }
+}
+
+.p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+    color: $helpButtonTextColor;
+    background: $helpButtonBg;
+    border: $helpButtonBorder;
+
+    &:not(:disabled):hover {
+        background: $helpButtonHoverBg;
+        color: $helpButtonTextHoverColor;
+        border-color: $helpButtonHoverBorderColor;
+    }
+
+    &:not(:disabled):focus {
+        box-shadow: $helpButtonFocusShadow;
+    }
+
+    &:not(:disabled):active {
+        background: $helpButtonActiveBg;
+        color: $helpButtonTextActiveColor;
+        border-color: $helpButtonActiveBorderColor;
+    }
+
+    &.p-button-outlined {
+        background-color: transparent;
+        color: $helpButtonBg;
+        border: $outlinedButtonBorder;
+
+        &:not(:disabled):hover {
+            background: rgba($helpButtonBg, $textButtonHoverBgOpacity);
+            color: $helpButtonBg;
+            border: $outlinedButtonBorder;
+        }
+
+        &:not(:disabled):active {
+            background: rgba($helpButtonBg, $textButtonActiveBgOpacity);
+            color: $helpButtonBg;
+            border: $outlinedButtonBorder;
+        }
+    }
+
+    &.p-button-text {
+        background-color: transparent;
+        color: $helpButtonBg;
+        border-color: transparent;
+
+        &:not(:disabled):hover {
+            background: rgba($helpButtonBg, $textButtonHoverBgOpacity);
+            border-color: transparent;
+            color: $helpButtonBg;
+        }
+
+        &:not(:disabled):active {
+            background: rgba($helpButtonBg, $textButtonActiveBgOpacity);
+            border-color: transparent;
+            color: $helpButtonBg;
+        }
+    }
+}
+
+.p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+    color: $dangerButtonTextColor;
+    background: $dangerButtonBg;
+    border: $dangerButtonBorder;
+
+    &:not(:disabled):hover {
+        background: $dangerButtonHoverBg;
+        color: $dangerButtonTextHoverColor;
+        border-color: $dangerButtonHoverBorderColor;
+    }
+
+    &:not(:disabled):focus {
+        box-shadow: $dangerButtonFocusShadow;
+    }
+
+    &:not(:disabled):active {
+        background: $dangerButtonActiveBg;
+        color: $dangerButtonTextActiveColor;
+        border-color: $dangerButtonActiveBorderColor;
+    }
+
+    &.p-button-outlined {
+        background-color: transparent;
+        color: $dangerButtonBg;
+        border: $outlinedButtonBorder;
+
+        &:not(:disabled):hover {
+            background: rgba($dangerButtonBg, $textButtonHoverBgOpacity);
+            color: $dangerButtonBg;
+            border: $outlinedButtonBorder;
+        }
+
+        &:not(:disabled):active {
+            background: rgba($dangerButtonBg, $textButtonActiveBgOpacity);
+            color: $dangerButtonBg;
+            border: $outlinedButtonBorder;
+        }
+    }
+
+    &.p-button-text {
+        background-color: transparent;
+        color: $dangerButtonBg;
+        border-color: transparent;
+
+        &:not(:disabled):hover {
+            background: rgba($dangerButtonBg, $textButtonHoverBgOpacity);
+            border-color: transparent;
+            color: $dangerButtonBg;
+        }
+
+        &:not(:disabled):active {
+            background: rgba($dangerButtonBg, $textButtonActiveBgOpacity);
+            border-color: transparent;
+            color: $dangerButtonBg;
+        }
+    }
+}
+
+@if variable-exists(contrastButtonTextColor) {
+    .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+        color: $contrastButtonTextColor;
+        background: $contrastButtonBg;
+        border: $contrastButtonBorder;
+    
+        &:not(:disabled):hover {
+            background: $contrastButtonHoverBg;
+            color: $contrastButtonTextHoverColor;
+            border-color: $contrastButtonHoverBorderColor;
+        }
+    
+        &:not(:disabled):focus {
+            box-shadow: $contrastButtonFocusShadow;
+        }
+    
+        &:not(:disabled):active {
+            background: $contrastButtonActiveBg;
+            color: $contrastButtonTextActiveColor;
+            border-color: $contrastButtonActiveBorderColor;
+        }
+    
+        &.p-button-outlined {
+            background-color: transparent;
+            color: $contrastButtonBg;
+            border: $outlinedButtonBorder;
+    
+            &:not(:disabled):hover {
+                background: rgba($contrastButtonBg, $textButtonHoverBgOpacity);
+                color: $contrastButtonBg;
+                border: $outlinedButtonBorder;
+            }
+    
+            &:not(:disabled):active {
+                background: rgba($contrastButtonBg, $textButtonActiveBgOpacity);
+                color: $contrastButtonBg;
+                border: $outlinedButtonBorder;
+            }
+        }
+    
+        &.p-button-text {
+            background-color: transparent;
+            color: $contrastButtonBg;
+            border-color: transparent;
+    
+            &:not(:disabled):hover {
+                background: rgba($contrastButtonBg, $textButtonHoverBgOpacity);
+                border-color: transparent;
+                color: $contrastButtonBg;
+            }
+    
+            &:not(:disabled):active {
+                background: rgba($contrastButtonBg, $textButtonActiveBgOpacity);
+                border-color: transparent;
+                color: $contrastButtonBg;
+            }
+        }
+    }
+}
+
+.p-button.p-button-link {
+    color: $linkButtonColor;
+    background: transparent;
+    border: transparent;
+
+    &:not(:disabled):hover {
+        background:  transparent;
+        color: $linkButtonHoverColor;
+        border-color:  transparent;
+
+        .p-button-label {
+            text-decoration: $linkButtonTextHoverDecoration;
+        }
+    }
+
+    &:not(:disabled):focus {
+        background: transparent;
+        box-shadow: $linkButtonFocusShadow;
+        border-color:  transparent;
+    }
+
+    &:not(:disabled):active {
+        background:  transparent;
+        color: $linkButtonColor;
+        border-color:  transparent;
+    }
+}