@scania/tegel/dist/collection/components/table/table-header-input-wrapper/table-header-input-wrapper.css

Tegel Design System

:host {
  position: relative;
}

: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;
}

tds-icon.search-icon {
  color: var(--tds-table-input-header-icon);
  position: absolute;
  left: 15px;
  top: 1px;
}

::slotted(input) {
  box-sizing: border-box;
  font: var(--tds-detail-02);
  letter-spacing: var(--tds-detail-02-ls);
  color: var(--tds-table-color);
  padding-left: var(--tds-spacing-element-16);
  padding-right: var(--tds-spacing-element-16);
  height: 48px;
  border-radius: 0;
  background-color: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
}

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

::slotted(input:focus) {
  outline: none;
  background-color: var(--tds-table-input-header-background-focus);
  border-bottom: 2px solid var(--tds-text-field-bar);
}

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