import { css } from "lit";
const componentStyle = css`
          * {
            -webkit-tap-highlight-color: transparent;
          }
/* Wrapper layout */
.wrapper {
  box-sizing: border-box;
  min-height: var(
    --ui-components-input-fields-text-input-field-touch-target-size
  );
  flex-shrink: 0;
  user-select: none;
  display: flex;
  flex-direction: column;
  gap: var(--ui-components-input-fields-rich-input-field-vertical-spacer, 4px);
  width: 420px;
  height: 100%;
}
/* Title text container with optional required indicator */
.title-text-container {
  display: flex;
  gap: var(
    --ui-components-input-fields-text-input-field-required-dot-spacer,
    4px
  );
  align-items: center;
  align-self: stretch;
  height: fit-content;
  user-select: none;
}
.title-text {
  font-family: var(--font-family-main);
  font-weight: var(--font-weight-regular);
  font-size: var(--global-typography-ui-label-font-size);
  line-height: var(--global-typography-ui-label-line-height);
  font-feature-settings:
    "liga" off,
    "clig" off,
    "ss04" on;
  color: var(--element-neutral-color);
  flex-shrink: 0;
  margin: 0;
}
.required-indicator {
  width: var(
    --ui-components-input-fields-text-input-field-required-dot-size,
    6px
  );
  height: var(
    --ui-components-input-fields-text-input-field-required-dot-size,
    6px
  );
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--instrument-enhanced-secondary-color);
}
/* Content container - bordered box with background */
.content-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 0 0;
  align-self: stretch;
  border-radius: var(
    --ui-components-input-fields-rich-input-field-border-radius,
    6px
  );
  border-top: var(--input-field-stroke-weight-top) solid
    var(--normal-enabled-border-color);
  border-right: var(--input-field-stroke-weight-right) solid
    var(--normal-enabled-border-color);
  border-bottom: var(--input-field-stroke-weight-bottom) solid
    var(--normal-enabled-border-color);
  border-left: var(--input-field-stroke-weight-left) solid
    var(--normal-enabled-border-color);
  background: var(--normal-enabled-background-color);
  position: relative;
  user-select: none;
}
/* Leading icon positioning */
.leading-icon {
  position: absolute;
  top: var(--ui-components-input-fields-rich-input-field-padding-vertical, 8px);
  left: var(
    --ui-components-input-fields-rich-input-field-padding-horizontal,
    8px
  );
  width: var(--ui-components-input-fields-text-input-field-icon-size);
  height: var(--ui-components-input-fields-text-input-field-icon-size);
  flex-shrink: 0;
  color: var(--element-neutral-color);
}
/* Textarea input styling */
.input-field {
  flex-grow: 1;
  box-sizing: border-box;
  font-family: var(--font-family-main);
  font-weight: var(--global-typography-ui-body-font-weight);
  font-size: var(--global-typography-ui-body-font-size);
  line-height: var(--global-typography-ui-body-line-height);
  font-feature-settings:
    "liga" off,
    "clig" off,
    "ss04" on;
  padding: var(
      --ui-components-input-fields-rich-input-field-padding-vertical,
      8px
    )
    calc(
      var(
          --ui-components-input-fields-rich-input-field-padding-horizontal,
          8px
        ) +
        var(--ui-components-input-fields-rich-input-field-label-spacing, 8px)
    );
  width: 100%;
  height: 100%;
  resize: none;
  border: none;
  border-radius: calc(
    var(--ui-components-input-fields-rich-input-field-border-radius, 6px) - 1px
  );
  outline: none;
  background: transparent;
  color: var(--on-normal-active-color);
}
.input-field:focus-visible {
    outline-width: var(--global-size-spacing-border-weight-focusframe, 2px);
    outline-color: var(--border-focus-color);
    outline-style: solid;
  }
.input-field::placeholder {
    color: var(--element-inactive-color);
  }
/* Adjust padding when leading icon is present */
.wrapper.has-leading-icon .input-field {
  padding-left: calc(
    var(--ui-components-input-fields-rich-input-field-padding-horizontal, 8px) +
      var(--ui-components-input-fields-rich-input-field-label-spacing, 8px) +
      var(--ui-components-input-fields-text-input-field-icon-size, 24px)
  );
}
/* Toolbar container layout */
.tool-bar-container {
  justify-content: space-between;
  align-items: flex-end;
  display: flex;
  align-self: stretch;
}
.tool-container {
  position: relative;
  display: flex;
  align-items: center;
}
.divider {
  position: absolute;
  left: calc(var(--ui-components-button-touch-target-size) - 0px);
  border-radius: 2px;
  width: 1px;
  height: var(--ui-components-divider-height-regular);
  fill: var(--border-divider-color);
  user-select: none;
  background-color: var(--border-divider-color);
  pointer-events: none;
}
.action-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1 0 0;
}
/* Disabled state */
.wrapper.disabled .input-field {
    color: var(--on-normal-disabled-color);
    cursor: not-allowed;
  }
:is(.wrapper.disabled .input-field)::placeholder {
      color: var(--on-normal-disabled-color);
    }
.wrapper.disabled .content-container {
    border-color: var(--normal-disabled-border-color);
    background: var(--normal-disabled-background-color);
  }
.wrapper.disabled .leading-icon {
    color: var(--element-disabled-color);
  }
.wrapper.disabled .title-text {
    color: var(--element-disabled-color);
  }
/* Error state */
.wrapper.error .content-container {
    outline-width: var(--global-size-spacing-border-weight-focusframe, 2px);
    outline-color: var(--alert-error-color);
    outline-style: solid;
    outline-offset: -1px;
  }
/* Empty state: container uses gray background */
.wrapper.empty .content-container {
  background: var(--container-background-color);
}
/* Focus or error state: container uses gray background, input field gets white */
.wrapper.focused .content-container,
.wrapper.error .content-container {
  background: var(--container-background-color);
}
.wrapper.focused .input-field,
.wrapper.error .input-field {
  background: var(--normal-enabled-background-color);
}
/* Message type: larger border radius (12px vs 6px) */
.wrapper.type-message .content-container {
    border-radius: var(
      --ui-components-input-fields-message-input-field-border-radius,
      12px
    );
  }
.wrapper.type-message .input-field {
    border-radius: calc(
      var(
          --ui-components-input-fields-message-input-field-border-radius,
          12px
        ) -
        1px
    );
  }
/* Rich type: error state uses outline on input, not container */
.wrapper.type-rich.error .content-container {
    outline: none;
  }
.wrapper.type-rich.error .input-field {
    outline-width: 2px;
    outline-color: var(--base-red-400);
    outline-style: solid;
  }
/* Audio recording item styling */
obc-audio-recording-item {
  flex: 1;
  padding: var(
      --ui-components-input-fields-rich-input-field-padding-vertical,
      8px
    )
    var(--ui-components-input-fields-rich-input-field-padding-horizontal, 8px);
}
/* Attachments container */
.attachments-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-components-input-fields-rich-input-field-chip-gap, 8px);
  padding: 0
    var(--ui-components-input-fields-rich-input-field-padding-horizontal, 8px);
  padding-bottom: var(
    --ui-components-input-fields-rich-input-field-padding-vertical,
    8px
  );
}
/* Error text below the field */
.error-text-container {
  display: flex;
  gap: var(
    --ui-components-input-fields-text-input-field-required-dot-spacer,
    4px
  );
  align-items: center;
  padding: 4px
    var(
      --ui-components-input-fields-number-input-field-label-spacing-title,
      4px
    )
    0
    var(
      --ui-components-input-fields-number-input-field-label-spacing-title,
      4px
    );
  /* Counteract wrapper gap to achieve correct 4px spacing from content-container */
  margin-top: calc(
    -1 * var(--ui-components-input-fields-rich-input-field-vertical-spacer, 4px)
  );
}
.error-text {
  font-family: var(--font-family-main);
  font-weight: var(--font-weight-regular);
  font-size: var(--global-typography-ui-label-font-size);
  line-height: var(--global-typography-ui-label-line-height);
  font-feature-settings:
    "liga" off,
    "clig" off,
    "ss04" on;
  color: var(--alert-error-outline-color);
  margin: 0;
}
/* Recording controls: overlap icon buttons by 1px for connected appearance */
.recording-controls obc-icon-button:not(:first-child) {
  margin-left: -1px;
}
/* Transcribe button: 8px gap from mic button */
.recording-controls obc-button {
  margin-right: 8px;
}
/* Inactive state: use element-inactive-color when field is empty */
.action-container.inactive obc-icon-button {
  --on-normal-neutral-color: var(--element-inactive-color);
}
/* Visually hidden but accessible to screen readers */
.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
`;
export {
  componentStyle as default
};
//# sourceMappingURL=textarea-field.css.js.map
