.p-splitbutton {
  border-radius: $borderRadius;

  &.p-button-outlined {
    > .p-button {
      background-color: transparent;
      color: $buttonBg;
      border: $outlinedButtonBorder;

      @include button-states {
        &:hover {
          background: rgba($buttonBg, $textButtonHoverBgOpacity);
          color: $buttonBg;
        }

        &:active {
          background: rgba($buttonBg, $textButtonActiveBgOpacity);
          color: $buttonBg;
        }
      }
    }

    &.p-button-plain {
      > .p-button {
        color: $plainButtonTextColor;
        border-color: $plainButtonTextColor;

        @include button-states {
          &:hover {
            background: $plainButtonHoverBgColor;
            color: $plainButtonTextColor;
          }

          &:active {
            background: $plainButtonActiveBgColor;
            color: $plainButtonTextColor;
          }
        }
      }
    }
  }

  &.p-button-text {
    > .p-button {
      background-color: transparent;
      color: $buttonBg;
      border-color: transparent;

      @include button-states {
        &:hover {
          background: rgba($buttonBg, $textButtonHoverBgOpacity);
          color: $buttonBg;
          border-color: transparent;
        }

        &:active {
          background: rgba($buttonBg, $textButtonActiveBgOpacity);
          color: $buttonBg;
          border-color: transparent;
        }
      }
    }

    &.p-button-plain {
      > .p-button {
        color: $plainButtonTextColor;

        @include button-states {
          &:hover {
            background: $plainButtonHoverBgColor;
            color: $plainButtonTextColor;
          }

          &:active {
            background: $plainButtonActiveBgColor;
            color: $plainButtonTextColor;
          }
        }
      }
    }
  }

  &.p-button-raised {
    box-shadow: $raisedButtonShadow;
  }

  &.p-button-rounded {
    border-radius: $roundedButtonBorderRadius;

    > .p-button {
      border-radius: $roundedButtonBorderRadius;
    }
  }

  &.p-button-sm {
    > .p-button {
      @include scaledFontSize($fontSize, $scaleSM);
      @include scaledPadding($buttonPadding, $scaleSM);

      .p-button-icon {
        @include scaledFontSize($primeIconFontSize, $scaleSM);
      }
    }
  }

  &.p-button-lg {
    > .p-button {
      @include scaledFontSize($fontSize, $scaleLG);
      @include scaledPadding($buttonPadding, $scaleLG);

      .p-button-icon {
        @include scaledFontSize($primeIconFontSize, $scaleLG);
      }
    }
  }
}

.p-splitbutton.p-button-secondary {
  &.p-button-outlined {
    > .p-button {
      background-color: transparent;
      color: $secondaryButtonBg;
      border: $outlinedButtonBorder;

      @include button-states {
        &:hover {
          background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity);
          color: $secondaryButtonBg;
        }

        &:active {
          background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity);
          color: $secondaryButtonBg;
        }
      }
    }
  }

  &.p-button-text {
    > .p-button {
      background-color: transparent;
      color: $secondaryButtonBg;
      border-color: transparent;

      @include button-states {
        &:hover {
          background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity);
          border-color: transparent;
          color: $secondaryButtonBg;
        }

        &:active {
          background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity);
          border-color: transparent;
          color: $secondaryButtonBg;
        }
      }
    }
  }
}

.p-splitbutton.p-button-info {
  &.p-button-outlined {
    > .p-button {
      background-color: transparent;
      color: $infoButtonBg;
      border: $outlinedButtonBorder;

      @include button-states {
        &:hover {
          background: rgba($infoButtonBg, $textButtonHoverBgOpacity);
          color: $infoButtonBg;
        }

        &:active {
          background: rgba($infoButtonBg, $textButtonActiveBgOpacity);
          color: $infoButtonBg;
        }
      }
    }
  }

  &.p-button-text {
    > .p-button {
      background-color: transparent;
      color: $infoButtonBg;
      border-color: transparent;

      @include button-states {
        &:hover {
          background: rgba($infoButtonBg, $textButtonHoverBgOpacity);
          border-color: transparent;
          color: $infoButtonBg;
        }

        &:active {
          background: rgba($infoButtonBg, $textButtonActiveBgOpacity);
          border-color: transparent;
          color: $infoButtonBg;
        }
      }
    }
  }
}

.p-splitbutton.p-button-success {
  &.p-button-outlined {
    > .p-button {
      background-color: transparent;
      color: $successButtonBg;
      border: $outlinedButtonBorder;

      @include button-states {
        &:hover {
          background: rgba($successButtonBg, $textButtonHoverBgOpacity);
          color: $successButtonBg;
        }

        &:active {
          background: rgba($successButtonBg, $textButtonActiveBgOpacity);
          color: $successButtonBg;
        }
      }
    }
  }

  &.p-button-text {
    > .p-button {
      background-color: transparent;
      color: $successButtonBg;
      border-color: transparent;

      @include button-states {
        &:hover {
          background: rgba($successButtonBg, $textButtonHoverBgOpacity);
          border-color: transparent;
          color: $successButtonBg;
        }

        &:active {
          background: rgba($successButtonBg, $textButtonActiveBgOpacity);
          border-color: transparent;
          color: $successButtonBg;
        }
      }
    }
  }
}

.p-splitbutton.p-button-warning {
  &.p-button-outlined {
    > .p-button {
      background-color: transparent;
      color: $warningButtonBg;
      border: $outlinedButtonBorder;

      @include button-states {
        &:hover {
          background: rgba($warningButtonBg, $textButtonHoverBgOpacity);
          color: $warningButtonBg;
        }

        &:active {
          background: rgba($warningButtonBg, $textButtonActiveBgOpacity);
          color: $warningButtonBg;
        }
      }
    }
  }

  &.p-button-text {
    > .p-button {
      background-color: transparent;
      color: $warningButtonBg;
      border-color: transparent;

      @include button-states {
        &:hover {
          background: rgba($warningButtonBg, $textButtonHoverBgOpacity);
          border-color: transparent;
          color: $warningButtonBg;
        }

        &:active {
          background: rgba($warningButtonBg, $textButtonActiveBgOpacity);
          border-color: transparent;
          color: $warningButtonBg;
        }
      }
    }
  }
}

.p-splitbutton.p-button-help {
  &.p-button-outlined {
    > .p-button {
      background-color: transparent;
      color: $helpButtonBg;
      border: $outlinedButtonBorder;

      @include button-states {
        &:hover {
          background: rgba($helpButtonBg, $textButtonHoverBgOpacity);
          color: $helpButtonBg;
        }

        &:active {
          background: rgba($helpButtonBg, $textButtonActiveBgOpacity);
          color: $helpButtonBg;
        }
      }
    }
  }

  &.p-button-text {
    > .p-button {
      background-color: transparent;
      color: $helpButtonBg;
      border-color: transparent;

      @include button-states {
        &:hover {
          background: rgba($helpButtonBg, $textButtonHoverBgOpacity);
          border-color: transparent;
          color: $helpButtonBg;
        }

        &:active {
          background: rgba($helpButtonBg, $textButtonActiveBgOpacity);
          border-color: transparent;
          color: $helpButtonBg;
        }
      }
    }
  }
}

.p-splitbutton.p-button-danger {
  &.p-button-outlined {
    > .p-button {
      background-color: transparent;
      color: $dangerButtonBg;
      border: $outlinedButtonBorder;

      @include button-states {
        &:hover {
          background: rgba($dangerButtonBg, $textButtonHoverBgOpacity);
          color: $dangerButtonBg;
        }

        &:active {
          background: rgba($dangerButtonBg, $textButtonActiveBgOpacity);
          color: $dangerButtonBg;
        }
      }
    }
  }

  &.p-button-text {
    > .p-button {
      background-color: transparent;
      color: $dangerButtonBg;
      border-color: transparent;

      @include button-states {
        &:hover {
          background: rgba($dangerButtonBg, $textButtonHoverBgOpacity);
          border-color: transparent;
          color: $dangerButtonBg;
        }

        &:active {
          background: rgba($dangerButtonBg, $textButtonActiveBgOpacity);
          border-color: transparent;
          color: $dangerButtonBg;
        }
      }
    }
  }
}