htwkalender-pwa/frontend/public/primevue-sass-theme/theme-base/components/button/_button.scss

// core
.p-button {
  display: inline-flex;
  cursor: pointer;
  user-select: none;
  align-items: center;
  vertical-align: bottom;
  text-align: center;
  overflow: hidden;
  position: relative;
}

.p-button-label {
  flex: 1 1 auto;
}

.p-button-icon-right {
  order: 1;
}

.p-button:disabled {
  cursor: default;
}

.p-button-icon-only {
  justify-content: center;
}

.p-button-icon-only .p-button-label {
  visibility: hidden;
  width: 0;
  flex: 0 0 auto;
}

.p-button-vertical {
  flex-direction: column;
}

.p-button-icon-bottom {
  order: 2;
}

.p-button-group .p-button {
  margin: 0;
}

.p-button-group .p-button:not(:last-child),
.p-button-group .p-button:not(:last-child):hover {
  border-right: 0 none;
}

.p-button-group .p-button:not(:first-of-type):not(:last-of-type) {
  border-radius: 0;
}

.p-button-group .p-button:first-of-type:not(:only-of-type) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.p-button-group .p-button:last-of-type:not(:only-of-type) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.p-button-group .p-button:focus {
  position: relative;
  z-index: 1;
}

// theme
.p-button {
  color: $buttonTextColor;
  background: $buttonBg;
  border: $buttonBorder;
  padding: $buttonPadding;
  font-size: $fontSize;
  transition: $formElementTransition;
  border-radius: $borderRadius;
  outline-color: transparent;

  &: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-visible {
    @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-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 {
  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 {
  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 {
  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 {
  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 {
  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 {
  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;
  }
}