/*
 * Siemens Inner Source License v1.5
 *
 * SPDX-FileCopyrightText: 2026 Siemens AG
 * SPDX-License-Identifier: LicenseRef-SISL-1.5
 */
/*
* Siemens Inner Source License v1.5
*
* SPDX-FileCopyrightText: 2026 Siemens AG
* SPDX-License-Identifier: LicenseRef-SISL-1.5
*/
/*
* Siemens Inner Source License v1.5
*
* SPDX-FileCopyrightText: 2026 Siemens AG
* SPDX-License-Identifier: LicenseRef-SISL-1.5
*/
/*
* Siemens Inner Source License v1.5
*
* SPDX-FileCopyrightText: 2026 Siemens AG
* SPDX-License-Identifier: LicenseRef-SISL-1.5
*/
*,
*::after,
*::before {
  box-sizing: border-box;
}

.text-field-root {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.field-label {
  align-items: baseline;
  display: flex;
  justify-content: space-between;
  padding: 0 0 var(--iris-pad-x-small) 0;
  width: 100%;
}

.label-content {
  align-items: baseline;
  display: flex;
  flex: 1 0 0;
  gap: 0;
  padding-inline-end: var(--iris-pad-medium);
}

.label-text {
  font-family: var(--iris-sans-body-medium-roman-font-family);
  font-size: var(--iris-sans-body-medium-roman-font-size);
  font-weight: var(--iris-sans-body-medium-roman-font-weight);
  letter-spacing: var(--iris-sans-body-medium-roman-letter-spacing);
  line-height: var(--iris-sans-body-medium-roman-line-height);
  color: var(--iris-text-1);
  flex-shrink: 0;
  margin: 0;
  padding: 0;
}

.asterisk {
  font-family: var(--iris-sans-body-medium-roman-font-family);
  font-size: var(--iris-sans-body-medium-roman-font-size);
  font-weight: var(--iris-sans-body-medium-roman-font-weight);
  letter-spacing: var(--iris-sans-body-medium-roman-letter-spacing);
  line-height: var(--iris-sans-body-medium-roman-line-height);
  color: var(--iris-text-2);
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  white-space: pre-wrap;
}

.character-count {
  font-family: var(--iris-sans-body-x-small-roman-font-family);
  font-size: var(--iris-sans-body-x-small-roman-font-size);
  font-weight: var(--iris-sans-body-x-small-roman-font-weight);
  letter-spacing: var(--iris-sans-body-x-small-roman-letter-spacing);
  line-height: var(--iris-sans-body-x-small-roman-line-height);
  color: var(--iris-text-1);
  flex-shrink: 0;
  margin: 0;
  padding: 0;
}

.text-field {
  align-items: stretch;
  background: var(--iris-forms-fill);
  border: var(--iris-border-width-small) solid var(--iris-forms-ui);
  border-radius: 0;
  display: flex;
  flex-direction: column;
  height: var(--iris-height-48);
  justify-content: center;
  padding: var(--iris-pad-medium) var(--iris-pad-x-large);
  width: 100%;
}

.input {
  font-family: var(--iris-sans-body-medium-roman-font-family);
  font-size: var(--iris-sans-body-medium-roman-font-size);
  font-weight: var(--iris-sans-body-medium-roman-font-weight);
  letter-spacing: var(--iris-sans-body-medium-roman-letter-spacing);
  line-height: var(--iris-sans-body-medium-roman-line-height);
  background: transparent;
  border: none;
  color: var(--iris-text-1);
  flex: 1 0 0;
  min-height: 0;
  outline: none;
  width: 100%;
}
.input::placeholder {
  color: var(--iris-text-3);
}
.input:disabled {
  color: var(--iris-text-disabled);
  cursor: not-allowed;
}
.input:read-only {
  cursor: default;
}

.text-field:has(.input:focus-visible) {
  box-shadow: inset 0 0 0 var(--iris-border-width-small) var(--iris-ui-focus);
}

.helper-text {
  align-items: center;
  display: flex;
  gap: var(--iris-gap-small);
  justify-content: flex-end;
  padding: var(--iris-pad-x-small) 0 0 0;
  width: 100%;
}

.helper-text-content {
  font-family: var(--iris-sans-body-x-small-roman-font-family);
  font-size: var(--iris-sans-body-x-small-roman-font-size);
  font-weight: var(--iris-sans-body-x-small-roman-font-weight);
  letter-spacing: var(--iris-sans-body-x-small-roman-letter-spacing);
  line-height: var(--iris-sans-body-x-small-roman-line-height);
  color: var(--iris-text-2);
  flex: 1 0 0;
  margin: 0;
  min-width: 0;
  padding: 0;
}

.helper-link {
  --iris-action-content-color: var(--iris-action-content-2);
  align-items: center;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  gap: var(--iris-gap-small);
  text-decoration: none;
}

.helper-link-text {
  font-family: var(--iris-sans-body-x-small-sbold-font-family);
  font-size: var(--iris-sans-body-x-small-sbold-font-size);
  font-weight: var(--iris-sans-body-x-small-sbold-font-weight);
  letter-spacing: var(--iris-sans-body-x-small-sbold-letter-spacing);
  line-height: var(--iris-sans-body-x-small-sbold-line-height);
  color: var(--iris-action-content-2);
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.helper-link-icon {
  flex-shrink: 0;
  height: 12px;
  width: 12px;
}

.helper-link:hover {
  --iris-action-content-color: var(--iris-action-content-2-hover);
}

.helper-link:hover .helper-link-text {
  color: var(--iris-action-content-2-hover);
}

.helper-link:active {
  --iris-action-content-color: var(--iris-action-content-2-active);
}

.helper-link:active .helper-link-text {
  color: var(--iris-action-content-2-active);
}

.text-field-root:not(.text-field-root--disabled,
.text-field-root--read-only,
.text-field-root--error) .text-field:hover {
  border-color: var(--iris-forms-ui-interactive-1);
}

.text-field-root--error .label-text {
  color: var(--iris-text-danger);
}
.text-field-root--error .asterisk {
  color: var(--iris-text-danger);
}
.text-field-root--error .text-field {
  border-color: var(--iris-status-danger);
}
.text-field-root--error .helper-text-content {
  color: var(--iris-text-danger);
}

.text-field-root--disabled .label-text {
  color: var(--iris-text-disabled);
}
.text-field-root--disabled .text-field {
  background: var(--iris-forms-fill-disabled);
  border-color: var(--iris-forms-ui-disabled);
}
.text-field-root--disabled .helper-link {
  opacity: 0;
  pointer-events: none;
}

.text-field-root--read-only .text-field {
  background: var(--iris-forms-fill-disabled);
}
.text-field-root--read-only .helper-link {
  opacity: 0;
  pointer-events: none;
}