@import "../../themes/anywhere.globals.scss";
// @import "../input-text/input-tsext.scss";

:host {
  /**
    * CSS variables for input field components (e.g., input text, spinner, input mask).
    * @prop --inputPadding: The padding of the input field.
    * @prop --inputBgColor: The background color of the input field.
    * @prop --inputBorder: The border of the input field.
    * @prop --inputTextColor: The text color of the input field, using the --textColor variable.
    * @prop --inputHoverBorderColor: The border color of the input field on hover, using the --primaryColor variable.
    * @prop --inputFocusBorderColor: The border color of the input field on focus, using the --primaryColor variable.
    * @prop --inputErrorBorder: The border of the input field in case of an error.
    * @prop --inputPlaceholderTextColor: The text color of the input field placeholder.
    * @prop --inputTransition: The transition effect for the input field, involving border color and box shadow, using the --transitionDuration variable.
    * @prop --inputFilledBg: The background color of the input field when filled.
    * @prop --inputFilledFocusBg: The background color of the input field when filled and focused.
    * @prop --inputFilledHoverBg: The background color of the input field when filled and hovered.
    * @prop --inputIconColor: The color of icons within the input field, using the --textColor variable.
    * @prop --inputErrorBorderColor: The border color of the input field in case of an error, using the --errorColor variable.
    */
  display: inline-flex;

  .any-inputnumber,
  .any-inputnumber-buttons {
    display: inline-flex;
    ::part(any-button):focus {
      box-shadow: none;
    }
  }

  .any-inputnumber-button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
  }

  .any-inputnumber-buttons-stacked .any-inputnumber-button ::part(any-button-label),
  .any-inputnumber-buttons-horizontal .any-inputnumber-button ::part(any-button-label) {
    display: none;
  }

  .any-inputnumber-buttons-stacked .any-inputnumber-button-up {
    ::part(any-button) {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      padding: 0;
      // border-top: 0;
    }
  }

  .any-inputnumber-buttons-stacked .any-inputnumber-input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .any-inputnumber-buttons-stacked .any-inputnumber-button-down ::part(any-button) {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
    padding: 0;
    // border-bottom: 0;
  }

  .any-inputnumber-buttons-stacked .any-inputnumber-button-group {
    display: flex;
    flex-direction: column;
    // align-self: flex-end;
  }

  .any-inputnumber-buttons-stacked .any-inputnumber-button-group .any-inputnumber-button {
    flex: 1 1 auto;
  }

  .any-inputnumber-buttons-horizontal .any-inputnumber-button-up {
    // order: 1;
    ::part(any-button) {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      margin-right: 0;
      display: flex;
    }
  }

  .any-inputnumber-buttons-horizontal .any-inputnumber-input {
    // order: 2;
    border-radius: 0;
  }

  .any-inputnumber-buttons-horizontal .any-inputnumber-button-down {
    // order: 3;
    ::part(any-button) {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      display: flex;
    }
  }

  .any-inputnumber-buttons-vertical {
    .any-inputnumber-buttons {
      flex-direction: column;
    }
  }

  .any-inputnumber-buttons-vertical .any-inputnumber-button-up {
    any-button {
      width: 100%;
    }
    ::part(any-button) {
      width: 100%;
      // order: 1;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  .any-inputnumber-buttons-vertical .any-inputnumber-input {
    // order: 2;
    border-radius: 0;
    text-align: center;
  }

  .any-inputnumber-buttons-vertical .any-inputnumber-button-down {
    any-button {
      width: 100%;
    }
    ::part(any-button) {
      // order: 3;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      width: 100%;
    }
  }

  .any-inputnumber-input {
    flex: 1 1 auto;
  }

  .any-fluid any-inputnumber,
  .any-fluid .any-inputnumber {
    width: 100%;
  }

  .any-fluid .any-inputnumber .any-inputnumber-input {
    width: 1%;
  }

  .any-fluid .any-inputnumber-buttons-vertical .any-inputnumber-input {
    width: 100%;
  }
}
