/* Typography Usage mixins */
tds-dropdown-option {
  --tds-dropdown-option-background: var(--component-dropdown-background-item-default);
  --tds-dropdown-option-background-hover: var(--component-dropdown-background-item-hover);
  --tds-dropdown-option-background-selected: var(
    --component-dropdown-background-item-selected-default
  );
  --tds-dropdown-option-color: var(--component-dropdown-text-item-default);
  --tds-dropdown-option-opacity-disabled: calc(var(--component-dropdown-opacity-disabled) / 100);
  --tds-dropdown-option-border: var(--component-dropdown-border-item-divider-default);
}

tds-dropdown {
  --tds-dropdown-bg: var(--component--input-background-primary);
  --tds-dropdown-value-color: var(--component--input-text-value-default);
  --tds-dropdown-label-color: var(--component--input-text-label-default);
  --tds-dropdown-label-inside-color: var(--component--input-text-label-default);
  --tds-dropdown-helper-color: var(--component--input-text-helper-default);
  --tds-dropdown-placeholder-color: var(--component--input-text-placeholder-default);
  --tds-dropdown-disabled-color: var(--component--input-text-placeholder-default);
  --tds-dropdown-disabled-opacity: calc(var(--component-dropdown-opacity-disabled) / 100);
  --tds-dropdown-filter-input-color: var(--component--input-text-value-default);
  --tds-dropdown-list-border-radius: calc(var(--component-dropdown-border-radius-default) * 1px);
  --tds-dropdown-error: var(--component--input-text-error-default);
  --tds-dropdown-menu-icon-color: var(--component-dropdown-icon-default);
  --tds-dropdown-clear-icon-color: var(--component--input-icon-control-default);
  --tds-dropdown-clear-icon-hover-color: var(--component--input-icon-control-hover);
  --tds-dropdown-list-box-shadow: 0 2px 3px 0 rgb(0, 0, 0, 0.1);
  --tds-placeholder-margin: calc(var(--unit-8) * 1px);
  --tds-dropdown-list-background-color: var(--component-dropdown-background-primary);
  --tds-dropdown-option-border: var(--component-dropdown-border-item-divider-default);
  --tds-dropdown-border-color: var(--component-button-border-standard-tertiary-hover);
}

.tds-mode-variant-primary tds-dropdown,
tds-dropdown.tds-mode-variant-primary {
  --tds-dropdown-bg: var(--component--input-background-primary);
  --tds-dropdown-list-background-color: var(--component-dropdown-background-primary);
}

.tds-mode-variant-secondary tds-dropdown,
tds-dropdown.tds-mode-variant-secondary {
  --tds-dropdown-bg: var(--component--input-background-secondary);
  --tds-dropdown-list-background-color: var(--component-dropdown-background-secondary);
}

.scania tds-dropdown {
  --tds-dropdown-list-box-shadow: 0 2px 3px 0 rgb(0, 0, 0, 0.1);
}

.traton tds-dropdown {
  --tds-dropdown-list-box-shadow: none;
}

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

:host {
  box-sizing: border-box;
}
:host * {
  box-sizing: border-box;
}
:host {
  display: table-footer-group;
  height: var(--tds-table-row-height);
}
:host .tds-table__footer-row {
  background-color: var(--tds-table-footer-background);
  color: var(--tds-table-footer-text-color);
}
:host .tds-table__footer-cell {
  padding: 0 var(--unit-16);
}
:host .tds-table__footer-cell .tds-table__pagination {
  height: var(--tds-table-row-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
:host .tds-table__footer-cell .tds-table__pagination .tds-table__row-selector,
:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector {
  display: flex;
  align-items: center;
}
:host .tds-table__footer-cell .tds-table__pagination .tds-table__row-selector .rows-per-page,
:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector .rows-per-page {
  display: flex;
  align-items: center;
  margin-right: var(--unit-16);
}
:host .tds-table__footer-cell .tds-table__pagination .tds-table__row-selector .rows-per-page p,
:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector .rows-per-page p {
  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);
  margin-right: var(--unit-8);
}
:host .tds-table__footer-cell .tds-table__pagination .tds-table__row-selector .rows-per-page tds-dropdown,
:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector .rows-per-page tds-dropdown {
  width: var(--unit-77);
}
:host .tds-table__footer-cell .tds-table__pagination .tds-table__row-selector .tds-table__page-selector-navigation,
:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector .tds-table__page-selector-navigation {
  display: flex;
  flex-direction: row;
  width: 160px;
  justify-content: space-evenly;
}
:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input {
  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);
  border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
  border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
  border-style: solid;
  border-color: var(--component--input-border-default);
  background-color: var(--tds-table-footer-page-selector-input-background);
  color: var(--tds-table-footer-text-color);
  width: var(--unit-77);
  height: var(--unit-40);
  transition: background-color 250ms ease;
  margin-right: var(--unit-10);
  padding-left: var(--unit-16);
}
:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input:hover {
  background-color: var(--tds-table-footer-page-selector-input-background);
}
:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input:disabled {
  opacity: var(--tds-table-input-opacity-disabled);
}
:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input:focus-visible {
  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;
}
:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input--shake {
  animation: tds-shake-animation 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}
:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-text {
  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: 1px 8px 0 0;
}

:host(.footer__horizontal-scroll) {
  display: inline-table;
  position: absolute;
  margin-top: var(--unit-10);
}

@keyframes tds-shake-animation {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }
  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}