@use "sass:meta";

@include meta.load-css("./ui/tems-input-field.scss");

.input {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--scale-200);
  label {
    height: auto;
    textarea {
      height: auto;
      flex: 1 1 auto;
      font-family: var(--font-family-body);
      font-size: var(--typography-size-body-md);
      font-weight: var(--font-weight-regular);
      line-height: var(--line-height-body-md);
      letter-spacing: var(--font-letter-spacing-default);
    }

    &:has(textarea:disabled) {
      border-color: var(--color-border-disabled);
      background-color: var(--color-surface-disabled);
      cursor: not-allowed;

      textarea {
        cursor: not-allowed;
        color: var(--color-text-disabled-on);
      }

      &:has(textarea:not(:placeholder-shown)) {
        background-color: var(--color-surface-disabled);
      }
    }

    &:hover:not(:has(textarea:disabled)) {
      border-color: var(--color-border-action-hover);

      &:has(textarea:not(:placeholder-shown)) {
        background-color: var(--color-surface-action-solid-hover-light);
      }
    }
    textarea {
      border: 0px solid transparent;
      appearance: none;
      background-color: transparent;

      &::placeholder {
        color: var(--color-text-disabled);
      }

      &:focus-visible {
        outline: 0px;
      }
    }
  }
  .hint {
    font-family: var(--font-family-body);
    font-size: var(--typography-size-body-md);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-body-md);
    letter-spacing: var(--font-letter-spacing-default);
  }
}