@use "sass:meta";

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

label {
  display: flex;
  gap: 0;
  &.defined {
    font-size: var(--typography-size-body-sm);
    line-height: var(--line-height-body-sm);
    padding: 0;
  }
  > input {
    flex: 1 1 auto;
    // Adding icon border to the line height
    line-height: calc(var(--line-height-body-sm) + 2px);
    padding: var(--scale-100) var(--scale-300);
  }

  &:has(input.report-validity:invalid) {
    border-color: var(--color-border-error);
    i,
    svg {
      color: var(--color-icon-error);
    }
    &:has(input:not(:placeholder-shown)) {
      background-color: var(--color-surface-error);
    }
  }

  &:has(input.report-validity:valid) {
    border-color: var(--color-border-success);
    i,
    svg {
      color: var(--color-icon-success);
    }
    &:has(input:not(:placeholder-shown)) {
      background-color: var(--color-surface-success);
    }
  }

  :not(:has(input:disabled)) {
    tems-input-pretab,
    tems-input-posttab {
      cursor: text;
    }
  }
}