aril 1.1.65 → 1.1.67

package/theme/styles/theme/base/components/button/_button.scss

@@ -1,576 +1,576 @@
-.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-label {
-			margin-left: $inlineSpacing;
-		}
-
-		.p-button-loading-icon {
-			margin-right: 0;
-		}
-	}
-}
-
-.p-fluid {
-	.p-button {
-		width: 100%;
-	}
-
-	.p-button-icon-only {
-		width: $buttonIconOnlyWidth;
-	}
-
-	.p-buttonset {
-		display: flex;
-
-		.p-button {
-			flex: 1;
-		}
-	}
-}
-
-.p-button.p-button-secondary,
-.p-buttonset.p-button-secondary > .p-button,
-.p-splitbutton.p-button-secondary > .p-button {
-	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-buttonset.p-button-info > .p-button,
-.p-splitbutton.p-button-info > .p-button {
-	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-buttonset.p-button-success > .p-button,
-.p-splitbutton.p-button-success > .p-button {
-	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-buttonset.p-button-warning > .p-button,
-.p-splitbutton.p-button-warning > .p-button {
-	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-buttonset.p-button-help > .p-button,
-.p-splitbutton.p-button-help > .p-button {
-	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-buttonset.p-button-danger > .p-button,
-.p-splitbutton.p-button-danger > .p-button {
-	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;
-		}
-	}
-}
-
-.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-label {
+			margin-left: $inlineSpacing;
+		}
+
+		.p-button-loading-icon {
+			margin-right: 0;
+		}
+	}
+}
+
+.p-fluid {
+	.p-button {
+		width: 100%;
+	}
+
+	.p-button-icon-only {
+		width: $buttonIconOnlyWidth;
+	}
+
+	.p-buttonset {
+		display: flex;
+
+		.p-button {
+			flex: 1;
+		}
+	}
+}
+
+.p-button.p-button-secondary,
+.p-buttonset.p-button-secondary > .p-button,
+.p-splitbutton.p-button-secondary > .p-button {
+	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-buttonset.p-button-info > .p-button,
+.p-splitbutton.p-button-info > .p-button {
+	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-buttonset.p-button-success > .p-button,
+.p-splitbutton.p-button-success > .p-button {
+	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-buttonset.p-button-warning > .p-button,
+.p-splitbutton.p-button-warning > .p-button {
+	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-buttonset.p-button-help > .p-button,
+.p-splitbutton.p-button-help > .p-button {
+	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-buttonset.p-button-danger > .p-button,
+.p-splitbutton.p-button-danger > .p-button {
+	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;
+		}
+	}
+}
+
+.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;
+	}
+}