@mixin input-button {
   background-color: #fff;
   color: #212533;
   border: none;
   min-width: 35px;
   margin: unset !important;
   &:hover:not(:disabled),
   &:focus:not(:disabled) {
      background-color: #eeebf2;
   }
}

body .p-inputwrapper {
   &:has(input:disabled) {
      opacity: 0.5;
      * {
         cursor: default;
      }
   }
   &.p-inputnumber {
      border-radius: 4px;
      display: inline-flex;
      align-items: stretch;
      min-height: 35px;
      border: 1px solid #c1c1cc;
      overflow: hidden;

      .p-inputnumber-input {
         padding: 0 8px;
         border: none;
      }

      .p-inputnumber-button-group {
         border-left: 1px solid #c1c1cc;
         display: flex;
         flex-direction: column;
         min-height: 100%;
         min-width: 35px;

         .p-inputnumber-button {
            @include input-button();

            ::before {
               font-size: 0.75rem;
            }
         }
      }

      &.p-inputnumber-horizontal {
         .p-inputnumber-input {
            border-left: 1px solid #c1c1cc;
            border-right: 1px solid #c1c1cc;
            max-width: 7.5em;
         }

         .p-inputnumber-button {
            @include input-button();
         }
      }
      &.p-inputnumber-vertical {
         .p-inputnumber-input {
            border-top: 1px solid #c1c1cc;
            border-bottom: 1px solid #c1c1cc;
         }

         .p-inputnumber-button {
            @include input-button();
            min-height: 35px;
         }
      }
   }

   &.p-inputnumber-input:focus {
      border-color: #428bca;
   }
}

p-inputnumber.ng-dirty.ng-invalid {
   .p-inputnumber {
      border-color: #c13018;
   }
}