/* Typography Usage mixins */
tds-button {
  --tds-btn-border-radius: calc(var(--component-button-border-radius-default) * 1px);
  --tds-btn-opacity-disabled: calc(var(--component-button-opacity-disabled) / 100);
  --tds-btn-primary-background: var(--component-button-background-standard-primary-default);
  --tds-btn-primary-background-hover: var(--component-button-background-standard-primary-hover);
  --tds-btn-primary-background-active: var(--component-button-background-standard-primary-active);
  --tds-btn-primary-background-focus: var(--component-button-background-standard-primary-default);
  --tds-btn-primary-color: var(--component-button-text-standard-primary-default);
  --tds-btn-primary-color-hover: var(--component-button-text-standard-primary-hover);
  --tds-btn-primary-color-active: var(--component-button-text-standard-primary-active);
  --tds-btn-primary-color-focus: var(--component-button-text-standard-primary-hover);
  --tds-btn-primary-border-color: var(--component-button-border-standard-primary-default);
  --tds-btn-primary-border-color-hover: var(--component-button-border-standard-primary-hover);
  --tds-btn-primary-border-color-active: var(--component-button-border-standard-primary-active);
  --tds-btn-primary-border-color-focus: var(--component-button-border-standard-primary-hover);
  --tds-btn-primary-outline-color-focus: var(--component--focus-ring-color-strong);
  --tds-btn-icon-primary-fill: var(--component-button-icon-standard-primary-default);
  --tds-btn-icon-primary-color: var(--component-button-icon-standard-primary-default);
  --tds-btn-icon-primary-fill-hover: var(--component-button-icon-standard-primary-hover);
  --tds-btn-icon-primary-color-hover: var(--component-button-icon-standard-primary-hover);
  --tds-btn-icon-primary-fill-active: var(--component-button-icon-standard-primary-active);
  --tds-btn-icon-primary-color-active: var(--component-button-icon-standard-primary-active);
  --tds-btn-icon-primary-fill-focus: var(--component-button-icon-standard-primary-hover);
  --tds-btn-icon-primary-color-focus: var(--component-button-icon-standard-primary-hover);
  --tds-btn-secondary-background: var(--component-button-background-standard-secondary-default);
  --tds-btn-secondary-background-hover: var(--component-button-background-standard-secondary-hover);
  --tds-btn-secondary-background-active: var(
    --component-button-background-standard-secondary-active
  );
  --tds-btn-secondary-background-focus: var(
    --component-button-background-standard-secondary-default
  );
  --tds-btn-secondary-color: var(--component-button-text-standard-secondary-default);
  --tds-btn-secondary-color-hover: var(--component-button-text-standard-secondary-hover);
  --tds-btn-secondary-color-active: var(--component-button-text-standard-secondary-active);
  --tds-btn-secondary-color-focus: var(--component-button-text-standard-secondary-hover);
  --tds-btn-secondary-border-color: var(--component-button-border-standard-secondary-default);
  --tds-btn-secondary-border-color-hover: var(--component-button-border-standard-secondary-hover);
  --tds-btn-secondary-border-color-active: var(--component-button-border-standard-secondary-active);
  --tds-btn-secondary-border-color-focus: var(--component-button-border-standard-secondary-hover);
  --tds-btn-secondary-outline-color-focus: var(--component--focus-ring-color-strong);
  --tds-btn-icon-secondary-fill: var(--component-button-icon-standard-secondary-default);
  --tds-btn-icon-secondary-color: var(--component-button-icon-standard-secondary-default);
  --tds-btn-icon-secondary-fill-hover: var(--component-button-icon-standard-secondary-hover);
  --tds-btn-icon-secondary-color-hover: var(--component-button-icon-standard-secondary-hover);
  --tds-btn-icon-secondary-fill-active: var(--component-button-icon-standard-secondary-active);
  --tds-btn-icon-secondary-color-active: var(--component-button-icon-standard-secondary-active);
  --tds-btn-icon-secondary-fill-focus: var(--component-button-icon-standard-secondary-hover);
  --tds-btn-icon-secondary-color-focus: var(--component-button-icon-standard-secondary-hover);
  --tds-btn-ghost-background: var(--component-button-background-standard-tertiary-default);
  --tds-btn-ghost-background-hover: var(--component-button-background-standard-tertiary-hover);
  --tds-btn-ghost-background-active: var(--component-button-background-standard-tertiary-active);
  --tds-btn-ghost-background-focus: var(--component-button-background-standard-tertiary-default);
  --tds-btn-ghost-color: var(--component-button-text-standard-tertiary-default);
  --tds-btn-ghost-color-hover: var(--component-button-text-standard-tertiary-hover);
  --tds-btn-ghost-color-active: var(--component-button-text-standard-tertiary-active);
  --tds-btn-ghost-color-focus: var(--component-button-text-standard-tertiary-hover);
  --tds-btn-ghost-border-color: var(--component-button-border-standard-tertiary-default);
  --tds-btn-ghost-border-color-hover: var(--component-button-border-standard-tertiary-hover);
  --tds-btn-ghost-border-color-active: var(--component-button-border-standard-tertiary-active);
  --tds-btn-ghost-border-color-focus: var(--component-button-border-standard-tertiary-hover);
  --tds-btn-ghost-outline-color-focus: var(--component--focus-ring-color-strong);
  --tds-btn-icon-ghost-fill: var(--component-button-icon-standard-tertiary-default);
  --tds-btn-icon-ghost-color: var(--component-button-icon-standard-tertiary-default);
  --tds-btn-icon-ghost-fill-hover: var(--component-button-icon-standard-tertiary-hover);
  --tds-btn-icon-ghost-color-hover: var(--component-button-icon-standard-tertiary-hover);
  --tds-btn-icon-ghost-fill-active: var(--component-button-icon-standard-tertiary-active);
  --tds-btn-icon-ghost-color-active: var(--component-button-icon-standard-tertiary-active);
  --tds-btn-icon-ghost-fill-focus: var(--component-button-icon-standard-tertiary-hover);
  --tds-btn-icon-ghost-color-focus: var(--component-button-icon-standard-tertiary-hover);
  --tds-btn-danger-background: var(--component-button-background-danger-primary-default);
  --tds-btn-danger-background-hover: var(--component-button-background-danger-primary-hover);
  --tds-btn-danger-background-active: var(--component-button-background-danger-primary-active);
  --tds-btn-danger-background-focus: var(--component-button-background-danger-primary-default);
  --tds-btn-danger-color: var(--component-button-text-danger-primary-default);
  --tds-btn-danger-color-hover: var(--component-button-text-danger-primary-hover);
  --tds-btn-danger-color-active: var(--component-button-text-danger-primary-active);
  --tds-btn-danger-color-focus: var(--component-button-text-danger-primary-hover);
  --tds-btn-danger-border-color: var(--component-button-border-danger-primary-default);
  --tds-btn-danger-border-color-hover: var(--component-button-border-danger-primary-hover);
  --tds-btn-danger-border-color-active: var(--component-button-border-danger-primary-active);
  --tds-btn-danger-border-color-focus: var(--component-button-border-danger-primary-hover);
  --tds-btn-danger-outline-color-focus: var(--component--focus-ring-color-strong);
  --tds-btn-icon-danger-fill: var(--component-button-icon-danger-primary-default);
  --tds-btn-icon-danger-color: var(--component-button-icon-danger-primary-default);
  --tds-btn-icon-danger-fill-hover: var(--component-button-icon-danger-primary-hover);
  --tds-btn-icon-danger-color-hover: var(--component-button-icon-danger-primary-hover);
  --tds-btn-icon-danger-fill-active: var(--component-button-icon-danger-primary-active);
  --tds-btn-icon-danger-color-active: var(--component-button-icon-danger-primary-active);
  --tds-btn-icon-danger-fill-focus: var(--component-button-icon-danger-primary-hover);
  --tds-btn-icon-danger-color-focus: var(--component-button-icon-danger-primary-hover);
}

tds-text-field {
  --tds-text-field-background-primary: var(--component--input-background-primary);
  --tds-text-field-background-secondary: var(--component--input-background-secondary);
  --tds-text-field-background: var(--tds-text-field-background-primary);
  --tds-text-field-color: var(--component--input-text-value-default);
  --tds-text-field-placeholder: var(--component--input-text-placeholder-default);
  --tds-text-field-data-color: var(--component--input-text-value-default);
  --tds-text-field-background-disabled-primary: var(--component--input-background-primary);
  --tds-text-field-background-disabled-secondary: var(--component--input-background-secondary);
  --tds-text-field-background-disabled: var(--tds-text-field-background-disabled-primary);
  --tds-text-field-color-disabled: var(--color-text-disabled);
  --tds-text-field-placeholder-disabled: var(--color-text-disabled);
  --tds-text-field-label-disabled: var(--color-text-disabled);
  --tds-text-field-ps-color-disabled: var(--color-text-disabled);
  --tds-text-field-helper-disabled: var(--color-text-disabled);
  --tds-text-field-opacity-disabled: calc(var(--component--input-opacity-disabled) / 100);
  --tds-text-field-label-color: var(--component--input-text-label-default);
  --tds-text-field-label-inside-color: var(--component--input-text-label-default);
  --tds-text-field-bar: var(--color-system-info-default);
  --tds-text-field-helper: var(--component--input-text-helper-default);
  --tds-text-field-border-bottom-error: var(--component--input-border-error-default);
  --tds-text-field-helper-error: var(--component--input-text-error-default);
  --tds-text-field-bar-error: var(--color-system-danger-default);
  --tds-text-field-icon-error: var(--component--input-icon-error-default);
  --tds-text-field-textcounter: var(--component--input-text-counter-default);
  --tds-text-field-textcounter-disabled: var(--color-text-disabled);
  --tds-text-field-textcounter-divider: var(--component--input-text-counter-default);
  --tds-text-field-textcounter-divider-disabled: var(--color-text-disabled);
  --tds-text-field-ps-color: var(--component--input-icon-prefix-default);
  --tds-text-field-ps-color-suffix: var(--component--input-icon-suffix-default);
  --tds-text-field-ps-color-error: var(--component--input-icon-error-default);
  --tds-text-field-resize-icon: var(--color-icon-subtle);
  --tds-text-field-border-bottom: var(--component--input-border-default);
  --tds-text-field-border-bottom-hover: var(--component--input-border-hover);
  --tds-text-field-border-bottom-success: var(--component--input-border-success-default);
  --tds-text-field-border-bottom-readonly: var(--color-border-defined);
  --tds-text-field-icon-read-only-color: var(--color-icon-strong);
  --tds-text-field-icon-read-only-label-color: var(--color-icon-strong);
  --tds-text-field-focus-ring-radius: var(--component-text-field-focus-ring-radius-primary);
}
tds-text-field .tds-mode-variant-primary {
  --tds-text-field-background: var(--tds-text-field-background-primary);
  --tds-text-field-background-disabled: var(--tds-text-field-background-disabled-primary);
  --tds-text-field-focus-ring-radius: var(--component-text-field-focus-ring-radius-primary);
}
tds-text-field .tds-mode-variant-secondary {
  --tds-text-field-background: var(--tds-text-field-background-secondary);
  --tds-text-field-background-disabled: var(--tds-text-field-background-disabled-secondary);
  --tds-text-field-focus-ring-radius: var(--component-text-field-focus-ring-radius-secondary);
}

:host {
  box-sizing: border-box;
}
:host * {
  box-sizing: border-box;
}
:host {
  display: table-caption;
  position: relative;
  background-color: var(--tds-table-toolbar-background);
  color: var(--tds-table-toolbar-text-color);
  padding: 0 var(--unit-16);
  height: 64px;
  border-top-left-radius: var(--tds-table-border-radius);
  border-top-right-radius: var(--tds-table-border-radius);
}
:host .tds-table__upper-bar-flex {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
}
:host .tds-table__actionbar-left {
  display: flex;
}
:host .tds-table__title {
  font-family: var(--type-system-title-01-font-family);
  font-size: calc(var(--type-system-title-01-font-size) * 1px);
  line-height: calc(var(--type-system-title-01-line-height) * 1px);
  font-weight: var(--type-system-title-01-font-weight);
  letter-spacing: calc(var(--type-system-title-01-letter-spacing) * 1px);
  padding-top: var(--unit-16);
  text-align: left;
  margin-right: var(--unit-8);
}
:host .tds-table__actionbar,
:host slot[name=end]::slotted(*),
:host slot[name=start]::slotted(*) {
  display: flex;
  align-self: center;
}
:host .tds-table__searchbar {
  display: flex;
  align-self: center;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  height: 48px;
  width: 50px;
  border-radius: 4px 4px 0 0;
  transition: background-color 250ms ease, width 250ms ease;
  overflow: hidden;
  background-color: transparent;
}
:host .tds-table__searchbar.tds-table__searchbar--active {
  width: 250px;
  padding-right: 8px;
  margin-right: 0;
}
:host .tds-table__searchbar .tds-table__searchbar-input {
  display: none;
  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);
  background-color: var(--tds-table-toolbar-background);
  z-index: 2;
  width: 204px;
  height: 40px;
  right: 5px;
  cursor: pointer;
}
:host .tds-table__searchbar .tds-table__searchbar-input-show {
  display: inline-flex;
}
:host .tds-table__searchbar .tds-table__searchbar-icon {
  padding-right: 0;
  margin-right: 6px;
  color: var(--tds-table-filter-icon-color);
}
:host .tds-table__searchbar .tds-table__searchbar-icon-hide {
  display: none;
}

:host(.toolbar__horizontal-scroll) {
  position: absolute;
  top: var(--unit-16);
}

:host(.tds-table--compact) {
  height: 56px;
}