/* Typography Usage mixins */
:host {
  position: relative;
}
:host tds-icon.search-icon {
  color: var(--tds-table-filter-icon-color);
  position: absolute;
  left: 15px;
  top: 1px;
}

:host(:hover) tds-icon {
  display: inline-block;
}

:host(.focused-input-wrapper) tds-icon {
  display: inline-block;
}
:host(.focused-input-wrapper) ::slotted(input:not(:focus)) {
  background-color: var(--tds-table-input-background-hover);
}

:host(.show-icon) ::slotted(input) {
  padding-left: 35px;
}

::slotted(input) {
  box-sizing: border-box;
  font-family: var(--type-system-body-01-font-family);
  font-size: calc(var(--type-system-body-01-font-size) * 1px);
  line-height: calc(var(--type-system-body-01-line-height) * 1px);
  font-weight: var(--type-system-body-01-font-weight);
  letter-spacing: calc(var(--type-system-body-01-letter-spacing) * 1px);
  text-transform: var(--type-system-body-01-text-transform);
  color: var(--tds-table-input-value-text-color);
  padding-left: var(--unit-16);
  padding-right: var(--unit-16);
  height: var(--tds-table-row-height);
  border-radius: 0;
  background-color: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
}

::slotted(input)::placeholder {
  color: var(--tds-table-input-placeholder-text-color);
}

::slotted(input:focus) {
  outline: 2px solid var(--component--focus-ring-color-strong);
  box-shadow: inset 0 1px 0 3px var(--component--focus-ring-color-discrete);
  outline-offset: -2px;
}

:host(.tds-table__compact) ::slotted(input) {
  height: var(--tds-table-row-height-compact); /* Reduced height for compact design */
}