/* Typography Usage mixins */
:host {
  position: relative;
}

:host(.focused-input-wrapper) tds-icon {
  display: inline-block;
}

:host(.show-icon) ::slotted(input) {
  padding-right: var(--unit-24);
}

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

tds-icon.edit-icon {
  display: none;
  position: absolute;
  right: 10px;
  top: 1px;
  pointer-events: none;
  cursor: pointer;
  color: var(--tds-table-edit-icon-color);
}

::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);
  padding-left: var(--unit-16);
  padding-right: var(--unit-16);
  color: var(--tds-table-input-value-text-color);
  background-color: transparent;
  height: var(--tds-table-row-height);
  border-radius: 0;
  border: 0;
  width: 100%;
  cursor: pointer;
}

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

::slotted(input:disabled) {
  opacity: var(--tds-table-input-opacity-disabled);
  cursor: not-allowed;
}

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

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