/*
 * SPDX-FileCopyrightText: 2024 Siemens AG
 *
 * SPDX-License-Identifier: MIT
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
/*
* SPDX-FileCopyrightText: 2024 Siemens AG
*
* SPDX-License-Identifier: MIT
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/*
* SPDX-FileCopyrightText: 2025 Siemens AG
*
* SPDX-License-Identifier: MIT
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/*
* SPDX-FileCopyrightText: 2024 Siemens AG
*
* SPDX-License-Identifier: MIT
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/*
* SPDX-FileCopyrightText: 2024 Siemens AG
*
* SPDX-License-Identifier: MIT
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/*
* SPDX-FileCopyrightText: 2024 Siemens AG
*
* SPDX-License-Identifier: MIT
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/*
* SPDX-FileCopyrightText: 2024 Siemens AG
*
* SPDX-License-Identifier: MIT
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
input {
  min-height: 2rem;
  width: auto;
  padding: 0.25rem 0.5rem;
  background-color: var(--theme-input--background);
  color: var(--theme-input--color);
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
  text-overflow: ellipsis;
  border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);
  border-radius: var(--theme-input--border-radius);
  box-shadow: var(--theme-input--box-shadow);
  font-feature-settings: "clig" off, "liga" off;
  font-family: Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;
  font-style: normal;
  font-size: var(--theme-ms-0);
  line-height: var(--theme-line-height-md);
  font-weight: var(--theme-font-weight-normal);
  letter-spacing: var(--theme-letter-spacing-xl);
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smooting: grayscale;
}
input[type=number] {
  text-align: right;
}
input[type=number]::-webkit-inner-spin-button {
  margin-right: -2px;
  margin-left: 2px;
  display: none;
}
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--theme-color-component-info) inset !important;
  -webkit-text-fill-color: var(--theme-input--color--autofill) !important;
  background-color: var(--theme-input--background--autofill) !important;
  border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;
  color: var(--theme-input--color--autofill) !important;
}
input:-webkit-autofill, input:autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--theme-color-component-info) inset !important;
  -webkit-text-fill-color: var(--theme-input--color--autofill) !important;
  background-color: var(--theme-input--background--autofill) !important;
  border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;
  color: var(--theme-input--color--autofill) !important;
}
input::-moz-placeholder {
  color: var(--theme-input-hint--color);
}
input::placeholder {
  color: var(--theme-input-hint--color);
}
input.hover:not(.readonly,
.read-only,
.disabled,
[readonly],
[disabled],
:-moz-read-only), input:hover:not(.readonly,
.read-only,
.disabled,
[readonly],
[disabled],
:-moz-read-only) {
  border-color: var(--theme-input--border-color--hover) !important;
  background-color: var(--theme-input--background--hover);
}
input.hover:not(.readonly,
.read-only,
.disabled,
[readonly],
[disabled],
:read-only), input:hover:not(.readonly,
.read-only,
.disabled,
[readonly],
[disabled],
:read-only) {
  border-color: var(--theme-input--border-color--hover) !important;
  background-color: var(--theme-input--background--hover);
}
input.focus:not(.readonly,
.read-only,
.disabled,
[readonly],
[disabled],
:-moz-read-only), input:focus:not(.readonly,
.read-only,
.disabled,
[readonly],
[disabled],
:-moz-read-only) {
  outline: 1px solid var(--theme-color-focus-bdr);
  outline-offset: var(--theme-input--focus--outline-offset);
  border-color: var(--theme-input--border-color--focus) !important;
}
input.focus:not(.readonly,
.read-only,
.disabled,
[readonly],
[disabled],
:read-only), input:focus:not(.readonly,
.read-only,
.disabled,
[readonly],
[disabled],
:read-only) {
  outline: 1px solid var(--theme-color-focus-bdr);
  outline-offset: var(--theme-input--focus--outline-offset);
  border-color: var(--theme-input--border-color--focus) !important;
}
input:-moz-read-only {
  box-shadow: none;
  background-color: transparent;
  outline: none;
  border: var(--theme-input--border-thickness) solid var(--theme-input--border-color--readonly);
}
input.read-only, input:read-only {
  box-shadow: none;
  background-color: transparent;
  outline: none;
  border: var(--theme-input--border-thickness) solid var(--theme-input--border-color--readonly);
}
input.read-only::-moz-placeholder, input:read-only::-moz-placeholder {
  color: transparent;
}
input:-moz-read-only::placeholder {
  color: transparent;
}
input.read-only::placeholder, input:read-only::placeholder {
  color: transparent;
}
input:disabled, input.disabled {
  box-shadow: none;
  background-color: transparent;
  outline: none;
  border: var(--theme-input--border-thickness) solid var(--theme-input--border-color--disabled);
}
input:disabled::-moz-placeholder, input.disabled::-moz-placeholder {
  color: transparent;
}
input:disabled::placeholder, input.disabled::placeholder {
  color: transparent;
}

textarea {
  min-height: 2rem;
  width: auto;
  padding: 0.25rem 0.5rem;
  background-color: var(--theme-input--background);
  color: var(--theme-input--color);
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
  text-overflow: ellipsis;
  border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);
  border-radius: var(--theme-input--border-radius);
  box-shadow: var(--theme-input--box-shadow);
  font-feature-settings: "clig" off, "liga" off;
  font-family: Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;
  font-style: normal;
  font-size: var(--theme-ms-0);
  line-height: var(--theme-line-height-md);
  font-weight: var(--theme-font-weight-normal);
  letter-spacing: var(--theme-letter-spacing-xl);
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smooting: grayscale;
}
textarea[type=number] {
  text-align: right;
}
textarea[type=number]::-webkit-inner-spin-button {
  margin-right: -2px;
  margin-left: 2px;
  display: none;
}
textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--theme-color-component-info) inset !important;
  -webkit-text-fill-color: var(--theme-input--color--autofill) !important;
  background-color: var(--theme-input--background--autofill) !important;
  border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;
  color: var(--theme-input--color--autofill) !important;
}
textarea:-webkit-autofill, textarea:autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--theme-color-component-info) inset !important;
  -webkit-text-fill-color: var(--theme-input--color--autofill) !important;
  background-color: var(--theme-input--background--autofill) !important;
  border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;
  color: var(--theme-input--color--autofill) !important;
}
textarea::-moz-placeholder {
  color: var(--theme-input-hint--color);
}
textarea::placeholder {
  color: var(--theme-input-hint--color);
}
textarea.hover:not(.readonly,
.read-only,
.disabled,
[readonly],
[disabled],
:-moz-read-only), textarea:hover:not(.readonly,
.read-only,
.disabled,
[readonly],
[disabled],
:-moz-read-only) {
  border-color: var(--theme-input--border-color--hover) !important;
  background-color: var(--theme-input--background--hover);
}
textarea.hover:not(.readonly,
.read-only,
.disabled,
[readonly],
[disabled],
:read-only), textarea:hover:not(.readonly,
.read-only,
.disabled,
[readonly],
[disabled],
:read-only) {
  border-color: var(--theme-input--border-color--hover) !important;
  background-color: var(--theme-input--background--hover);
}
textarea.focus:not(.readonly,
.read-only,
.disabled,
[readonly],
[disabled],
:-moz-read-only), textarea:focus:not(.readonly,
.read-only,
.disabled,
[readonly],
[disabled],
:-moz-read-only) {
  outline: 1px solid var(--theme-color-focus-bdr);
  outline-offset: var(--theme-input--focus--outline-offset);
  border-color: var(--theme-input--border-color--focus) !important;
}
textarea.focus:not(.readonly,
.read-only,
.disabled,
[readonly],
[disabled],
:read-only), textarea:focus:not(.readonly,
.read-only,
.disabled,
[readonly],
[disabled],
:read-only) {
  outline: 1px solid var(--theme-color-focus-bdr);
  outline-offset: var(--theme-input--focus--outline-offset);
  border-color: var(--theme-input--border-color--focus) !important;
}
textarea:-moz-read-only {
  box-shadow: none;
  background-color: transparent;
  outline: none;
  border: var(--theme-input--border-thickness) solid var(--theme-input--border-color--readonly);
}
textarea.read-only, textarea:read-only {
  box-shadow: none;
  background-color: transparent;
  outline: none;
  border: var(--theme-input--border-thickness) solid var(--theme-input--border-color--readonly);
}
textarea.read-only::-moz-placeholder, textarea:read-only::-moz-placeholder {
  color: transparent;
}
textarea:-moz-read-only::placeholder {
  color: transparent;
}
textarea.read-only::placeholder, textarea:read-only::placeholder {
  color: transparent;
}
textarea:disabled, textarea.disabled {
  box-shadow: none;
  background-color: transparent;
  outline: none;
  border: var(--theme-input--border-thickness) solid var(--theme-input--border-color--disabled);
}
textarea:disabled::-moz-placeholder, textarea.disabled::-moz-placeholder {
  color: transparent;
}
textarea:disabled::placeholder, textarea.disabled::placeholder {
  color: transparent;
}
textarea {
  min-height: 2rem;
  padding: calc(0.375rem - var(--theme-input--border-thickness)) calc(0.5rem - var(--theme-input--border-thickness));
}
textarea:not([rows]) {
  height: 3.25rem;
}

textarea.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]),
input.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]) {
  border-color: var(--theme-input--border-color--info);
}
textarea.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):hover,
input.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):hover {
  border-color: var(--theme-input--border-color--info--hover) !important;
}
textarea.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):active,
input.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):active {
  border-color: var(--theme-input--border-color--info--active) !important;
}

textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]),
input.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]) {
  background-color: var(--theme-input--background--warning);
  border-color: var(--theme-input--border-color--warning--active) !important;
}
textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):hover,
input.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):hover {
  background-color: var(--theme-input--background--warning--hover);
  border-color: var(--theme-input--border-color--warning--hover) !important;
}
textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):active,
input.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):active {
  border-color: var(--theme-input--border-color--warning--active) !important;
}

textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]),
input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]) {
  background-color: var(--theme-input--background--invalid);
  border-color: var(--theme-input--border-color--invalid) !important;
}
textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):hover,
input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):hover {
  background-color: var(--theme-input--background--invalid--hover);
  border-color: var(--theme-input--border-color--invalid--hover) !important;
}
textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):active,
input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):active {
  border-color: var(--theme-input--border-color--invalid--active) !important;
}

:host {
  display: inline-block;
  position: relative;
  width: auto;
}
:host *,
:host *::after,
:host *::before {
  box-sizing: border-box;
}
:host ::-webkit-scrollbar-button {
  display: none;
}
@-moz-document url-prefix() {
  :host * {
    scrollbar-color: var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);
    scrollbar-width: thin;
  }
}
:host {
  /* width */
}
:host ::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.5rem;
}
:host {
  /* Track */
}
:host ::-webkit-scrollbar-track {
  border-radius: 5px;
  background: var(--theme-scrollbar-track--background);
}
:host ::-webkit-scrollbar-track:hover {
  background: var(--theme-scrollbar-track--background--hover);
}
:host {
  /* Handle */
}
:host ::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: var(--theme-scrollbar-thumb--background);
}
:host {
  /* Handle on hover */
}
:host ::-webkit-scrollbar-thumb:hover {
  background: var(--theme-scrollbar-thumb--background--hover);
}
:host ::-webkit-scrollbar-corner {
  display: none;
}
:host .input-wrapper {
  display: flex;
  position: relative;
  align-items: center;
  width: 100%;
  height: 100%;
}
:host input {
  width: 100%;
  height: 100%;
}
:host .start-container,
:host .end-container {
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
:host .start-container {
  left: var(--theme-input--border-thickness);
}
:host .end-container {
  right: calc(var(--theme-input--border-thickness) + 0.125rem);
}
:host .start-container ::slotted(*) {
  margin-left: 0.5rem;
}
:host .start-container ::slotted(ix-icon.size-24),
:host .start-container ::slotted(ix-icon-button.btn-icon-16) {
  margin-left: 0.25rem;
}
:host .start-container ::slotted(ix-icon-button.btn-icon-32) {
  margin-left: 0;
}
:host .end-container ::slotted(*) {
  margin-right: 0.5rem;
}
:host .end-container ::slotted(ix-icon.size-24),
:host .end-container ::slotted(ix-icon-button.btn-icon-16) {
  margin-right: 0.25rem;
}
:host .end-container ::slotted(ix-icon-button.btn-icon-32) {
  margin-right: 0;
}
:host .bottom-text {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
:host .input-wrapper:hover input:not(:disabled):not(:-moz-read-only) {
  border-color: var(--theme-input--border-color--hover) !important;
  background-color: var(--theme-input--background--hover);
}
:host .input-wrapper:hover input:not(:disabled):not(:read-only) {
  border-color: var(--theme-input--border-color--hover) !important;
  background-color: var(--theme-input--background--hover);
}

:host(.disabled) {
  pointer-events: none;
}
:host(.disabled) input,
:host(.disabled) textarea {
  pointer-events: none;
}

:host(.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input {
  border-color: var(--theme-input--border-color--info);
}
:host(.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input:hover,
:host(.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .input-wrapper:hover input {
  border-color: var(--theme-input--border-color--info--hover) !important;
}
:host(.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input:active {
  border-color: var(--theme-input--border-color--info--active) !important;
}

:host(.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input {
  background-color: var(--theme-input--background--warning);
  border-color: var(--theme-input--border-color--warning--active) !important;
}
:host(.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input:hover,
:host(.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .input-wrapper:hover input {
  background-color: var(--theme-input--background--warning--hover);
  border-color: var(--theme-input--border-color--warning--active) !important;
}
:host(.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input:active {
  border-color: var(--theme-input--border-color--warning--active) !important;
}

:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input,
:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input {
  background-color: var(--theme-input--background--invalid);
  border-color: var(--theme-input--border-color--invalid) !important;
}
:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input:hover,
:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .input-wrapper:hover input,
:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input:hover,
:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .input-wrapper:hover input {
  background-color: var(--theme-input--background--invalid--hover);
  border-color: var(--theme-input--border-color--invalid--hover) !important;
}
:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input:active,
:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input:active {
  border-color: var(--theme-input--border-color--invalid--active) !important;
}

:host .input-wrapper.show-stepper-buttons input[type=number] {
  min-width: 6rem;
}
:host .number-stepper-container {
  display: flex;
  position: relative;
  flex-direction: row;
  flex-wrap: nowrap;
}
:host .number-stepper-container.container-hidden {
  display: none;
}