@scania/tegel-lite 0.0.1-beta.0

package/dist/tl-table.css

@@ -0,0 +1,827 @@
+:host,
+:root {
+  --tl-scrollbar-width-standard: thin;
+  --tl-scrollbar-width: 10px;
+  --tl-scrollbar-height: 10px;
+  --tl-scrollbar-thumb-border-width: 3px;
+  --tl-scrollbar-thumb-border-hover-width: 2px;
+}
+
+body {
+  scrollbar-width: thin;
+}
+
+.tl-table {
+  /* Table-text */
+  --table-text: var(--color-foreground-text-strong);
+  /* Table-body-cell */
+  --table-body-cell-hover: var(--component-table-cell-hover);
+  /* Table-body-row */
+  --table-body-row: var(--component-table-cell);
+  --table-body-row-hover: var(--component-table-cell-hover);
+  --table-zebra-mode: var(--component-table-secondary-cell);
+  --table-body-row-selected: var(--color-background-surface-300);
+  --table-body-row-selected-hover: var(--color-background-surface-400);
+  /* Table input body */
+  --table-input-focus: var(--color-background-layer-02);
+  --table-input-hover: var(--color-background-layer-03);
+  --table-input-disabled: var(--color-background-layer-01);
+  --table-input-text-disabled: var(--color-foreground-text-subtle);
+  /* Table input header */
+  --table-input-header-icon: var(--color-foreground-icon-soft);
+  --table-input-header-placeholder: var(--color-foreground-text-subtle);
+  --table-input-header-focus: var(--color-background-layer-01);
+  /* Table-footer */
+  --table-footer: var(--component-table-pagination-base);
+  --table-footer-page-selector-input: var(--component-table-pagination-dropdown);
+  --table-footer-page-selector-input-hover: var(--color-background-layer-03);
+  --table-footer-page-selector-input-disabled: var(--color-background-layer-01);
+  --table-footer-button-hover: var(--color-background-surface-300);
+  /* Table-header */
+  --table-header: var(--color-background-surface-300);
+  --table-header-hover: var(--color-background-surface-400);
+  --table-header-button: var(--color-background-surface-200);
+  --table-header-button-hover: var(--color-background-surface-300);
+  --table-header-button-focus: var(--color-foreground-border-accent-focus);
+  /* Table-toolbar */
+  --table-toolbar: var(--color-background-surface-400);
+  --table-toolbar-searchbar: var(--component-table-pagination-dropdown);
+  --table-toolbar-searchbar-hover: var(--component-table-pagination-base);
+  --table-toolbar-searchbar-border-bottom: var(--color-foreground-border-accent-focus);
+  /* Divider */
+  --table-divider: var(--color-foreground-border-discrete);
+  /* Table-icons */
+  --table-icon: var(--color-foreground-icon-strong);
+  --table-icon-disabled: var(--color-foreground-icon-disabled);
+}
+.tl-table.tl-table--primary {
+  --table-body-row: var(--component-table-cell);
+  --table-body-row-hover: var(--component-table-cell-hover);
+  --table-body-cell-hover: var(--component-table-cell-hover);
+  --table-zebra-mode: var(--component-table-secondary-cell);
+}
+.tl-table.tl-table--secondary {
+  --table-body-row: var(--component-table-secondary-cell);
+  --table-body-row-hover: var(--component-table-cell-hover);
+  --table-body-cell-hover: var(--component-table-cell-hover);
+  --table-zebra-mode: var(--component-table-cell);
+}
+
+.tds-mode-dark .tl-table.tl-table--secondary {
+  --table-body-cell-hover: var(--color-background-surface-300);
+  --table-body-row-hover: var(--color-background-surface-300);
+}
+
+/* Typography Usage mixins */
+.tl-table__footer {
+  display: table-footer-group;
+  height: var(--tds-spacing-element-48);
+}
+.tl-table--compact .tl-table__footer {
+  height: var(--tds-spacing-element-32);
+}
+
+.tl-table__footer .tl-dropdown__text {
+  max-width: calc(100% - 20px);
+}
+
+.tl-table__footer .tl-dropdown--sm :is(.tl-dropdown__button, .tl-dropdown__select, .tl-dropdown__input),
+.tl-table__footer .tl-dropdown__option {
+  height: 29px;
+}
+
+.tl-table__footer-row {
+  display: table-row;
+  border-bottom: 1px solid var(--table-divider);
+  background-color: var(--table-footer);
+  color: var(--table-text);
+  transition: background-color 200ms ease;
+}
+
+.tl-table__footer-cell {
+  padding: 0 var(--tds-spacing-element-16);
+}
+
+.tl-table__pagination {
+  height: var(--tds-spacing-element-48);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.tl-table--compact .tl-table__pagination {
+  height: var(--tds-spacing-element-32);
+}
+
+.tl-table__row-selector,
+.tl-table__page-selector {
+  display: flex;
+  align-items: center;
+}
+
+.tl-table__rows-per-page {
+  margin-right: var(--tds-spacing-element-16);
+  display: flex;
+  align-items: center;
+}
+
+.tl-table__rows-per-page-label {
+  margin-right: var(--tds-spacing-element-8);
+  font-family: var(--detail-02-font-family);
+}
+
+.tl-table__rows-per-page-select {
+  background-color: var(--table-footer-page-selector-input);
+  color: var(--table-text);
+  height: 30px;
+  border: none;
+  border-radius: var(--tds-spacing-element-4);
+  padding: 0 var(--tds-spacing-element-8);
+  transition: background-color 250ms ease;
+  font-family: var(--detail-02-font-family);
+}
+.tl-table__rows-per-page-select:hover {
+  background-color: var(--table-footer-page-selector-input-hover);
+}
+.tl-table__rows-per-page-select:disabled {
+  color: var(--table-footer-page-selector-input-color-disabled);
+}
+.tl-table--compact .tl-table__rows-per-page-select {
+  height: var(--tds-spacing-element-24);
+}
+
+.tl-table__page-selector-input {
+  background-color: var(--table-footer-page-selector-input);
+  border-radius: var(--tds-spacing-element-4);
+  color: var(--table-text);
+  margin-right: var(--tds-spacing-element-4);
+  padding-right: var(--tds-spacing-element-8);
+  width: 74px;
+  height: 30px;
+  border: none;
+  transition: background-color 250ms ease;
+  font-family: var(--detail-02-font-family);
+}
+.tl-table__page-selector-input:hover {
+  background-color: var(--table-footer-page-selector-input-hover);
+}
+.tl-table__page-selector-input:disabled {
+  color: var(--table-footer-page-selector-input-color-disabled);
+}
+.tl-table--compact .tl-table__page-selector-input {
+  height: var(--tds-spacing-element-24);
+}
+
+.tl-table__footer-text {
+  padding: 1px 22px 0 0;
+  font-family: var(--detail-02-font-family);
+}
+.tl-table__footer-text span {
+  font-family: var(--detail-02-font-family);
+}
+
+.tl-table__footer-button {
+  border-radius: var(--tds-spacing-element-4);
+  color: var(--table-icon);
+  height: var(--tds-spacing-element-32);
+  width: var(--tds-spacing-element-32);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  transition: background-color 250ms ease;
+}
+.tl-table__footer-button:hover {
+  background-color: var(--table-footer-button-hover);
+}
+.tl-table__footer-button:disabled {
+  color: var(--table-icon-disabled);
+  cursor: default;
+}
+.tl-table__footer-button:disabled:hover {
+  background-color: transparent;
+}
+.tl-table--compact .tl-table__footer-button {
+  height: 28px;
+  width: 28px;
+}
+
+.tl-table {
+  box-sizing: border-box;
+}
+.tl-table * {
+  box-sizing: border-box;
+}
+.tl-table {
+  border-collapse: collapse;
+  display: table;
+  color: var(--table-text);
+}
+.tl-table--responsive {
+  width: 100%;
+}
+.tl-table--horizontal-scroll {
+  display: block;
+  overflow-x: auto;
+  white-space: nowrap;
+}
+.tl-table--horizontal-scroll::-webkit-scrollbar {
+  height: var(--tl-scrollbar-height);
+}
+.tl-table--horizontal-scroll::-webkit-scrollbar-track {
+  background: var(--tl-scrollbar-track-color);
+}
+.tl-table--horizontal-scroll::-webkit-scrollbar-thumb {
+  border-radius: 40px;
+  background: var(--tl-scrollbar-thumb-color);
+  border-width: var(--tl-scrollbar-thumb-border-width);
+  border-style: solid;
+  border-color: transparent;
+  background-clip: padding-box;
+}
+.tl-table--horizontal-scroll::-webkit-scrollbar-thumb:hover {
+  border-width: var(--tl-scrollbar-thumb-border-hover-width);
+}
+.tl-table--horizontal-scroll::-webkit-scrollbar-button {
+  height: 0;
+  width: 0;
+}
+@supports not selector(::-webkit-scrollbar) {
+  .tl-table--horizontal-scroll {
+    scrollbar-color: var(--tl-scrollbar-thumb-color) var(--tl-scrollbar-track-color);
+    scrollbar-width: var(--tl-scrollbar-width-standard);
+  }
+}
+.tl-table--primary {
+  --table-body-row: var(--component-table-cell);
+  --table-body-row-hover: var(--component-table-cell-hover);
+  --table-zebra-mode: var(--component-table-secondary-cell);
+}
+.tl-table--secondary {
+  --table-body-row: var(--component-table-secondary-cell);
+  --table-body-row-hover: var(--component-table-cell-hover);
+  --table-zebra-mode: var(--component-table-cell);
+}
+
+.tl-table__header {
+  display: table-header-group;
+}
+
+.tl-table__body {
+  display: table-row-group;
+}
+
+.tl-table__row {
+  display: table-row;
+  border-bottom: 1px solid var(--table-divider);
+  background-color: var(--table-body-row);
+  transition: background-color 200ms ease;
+  color: var(--table-text);
+}
+.tl-table__row:hover:not(.tl-table__row--expanded) {
+  background-color: var(--table-body-row-hover);
+  border-bottom-color: var(--table-divider);
+}
+.tl-table__row--selected {
+  background-color: var(--table-body-row-selected);
+}
+.tl-table__row--selected:hover {
+  background-color: var(--table-body-row-selected-hover);
+}
+.tl-table--clickable .tl-table__row, .tl-table__row--clickable {
+  cursor: pointer;
+}
+.tl-table__row--clickable:focus-visible {
+  outline: 2px solid var(--table-header-button-focus);
+  outline-offset: -2px;
+}
+.tl-table--zebra-rows-odd .tl-table__body .tl-table__row:nth-child(odd) {
+  background-color: var(--table-zebra-mode);
+}
+.tl-table--zebra-rows-even .tl-table__body .tl-table__row:nth-child(even) {
+  background-color: var(--table-zebra-mode);
+}
+
+.tl-table__header-cell {
+  display: table-cell;
+  padding: 16px;
+  background-color: var(--table-header);
+  border-bottom: 1px solid var(--table-divider);
+  font-family: var(--headline-07-font-family);
+  font-size: var(--headline-07-font-size);
+  line-height: var(--headline-07-line-height);
+  font-weight: var(--headline-07-font-weight);
+  letter-spacing: var(--headline-07-letter-spacing);
+  text-transform: var(--headline-07-text-transform);
+  color: var(--table-text);
+  text-align: left;
+  transition: background-color 200ms ease;
+  min-width: 192px;
+}
+.tl-table__header-cell:hover:not(.tl-table__header-cell--checkbox):not(.tl-table__header-cell--expand) {
+  background-color: var(--table-header-hover);
+}
+.tl-table__header-cell:first-of-type {
+  border-top-left-radius: 4px;
+}
+.tl-table__header-cell:last-of-type {
+  border-top-right-radius: 4px;
+}
+.tl-table:has(.tl-table__toolbar) .tl-table__header-cell:first-of-type, .tl-table__header-cell:has(.tl-table__header-input-wrapper):first-of-type {
+  border-top-left-radius: 0;
+}
+.tl-table:has(.tl-table__toolbar) .tl-table__header-cell:last-of-type, .tl-table__header-cell:has(.tl-table__header-input-wrapper):last-of-type {
+  border-top-right-radius: 0;
+}
+.tl-table__header-cell:has(.tl-table__header-input-wrapper), .tl-table--no-header-padding .tl-table__header-cell, .tl-table__header-cell--sortable {
+  padding: 0;
+}
+.tl-table__header-cell--checkbox, .tl-table__header-cell--expand {
+  min-width: 48px;
+  width: 48px;
+  padding: 0;
+  text-align: center;
+  background-color: var(--table-header);
+}
+.tl-table--compact .tl-table__header-cell {
+  height: 32px;
+  padding: 8px 16px;
+}
+.tl-table--compact .tl-table__header-cell--checkbox, .tl-table--compact .tl-table__header-cell--expand, .tl-table--compact .tl-table__header-cell:has(.tl-table__header-input-wrapper) {
+  padding: 0;
+}
+.tl-table--no-min-width .tl-table__header-cell {
+  min-width: unset;
+}
+.tl-table--header-text-align-left .tl-table__header-cell {
+  text-align: left;
+}
+.tl-table--header-text-align-start .tl-table__header-cell {
+  text-align: start;
+}
+.tl-table--header-text-align-center .tl-table__header-cell {
+  text-align: center;
+}
+.tl-table--header-text-align-right .tl-table__header-cell {
+  text-align: right;
+}
+.tl-table--header-text-align-end .tl-table__header-cell {
+  text-align: end;
+}
+
+.tl-table__header-button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  justify-content: start;
+  flex-direction: row;
+  width: 100%;
+  height: 100%;
+  padding: 16px;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  transition: background-color 200ms ease;
+  font-family: var(--headline-07-font-family);
+  font-size: var(--headline-07-font-size);
+  line-height: var(--headline-07-line-height);
+  font-weight: var(--headline-07-font-weight);
+  letter-spacing: var(--headline-07-letter-spacing);
+  text-transform: var(--headline-07-text-transform);
+  color: var(--table-text);
+  text-align: left;
+}
+.tl-table__header-button:focus-visible, .tl-table__header-button:focus, .tl-table__header-button:active {
+  outline: 2px solid var(--table-header-button-focus);
+  outline-offset: -2px;
+}
+.tl-table--compact .tl-table__header-button {
+  padding: 0;
+}
+
+.tl-table__header-button-text {
+  color: var(--table-text);
+  text-align: left;
+}
+
+.tl-table__header-button-icon {
+  flex: 0 0 16px;
+  height: 16px;
+  width: 16px;
+  opacity: 0;
+  transform-origin: center;
+  transition: opacity 200ms ease-in, transform 200ms ease;
+  color: var(--table-text);
+}
+
+.tl-table__header-button:focus-visible .tl-table__header-button-icon,
+.tl-table__header-button:focus .tl-table__header-button-icon,
+.tl-table__header-button:active .tl-table__header-button-icon,
+.tl-table__header-button:hover .tl-table__header-button-icon {
+  opacity: 1;
+}
+
+.tl-table__header-cell--is-sorted {
+  background-color: var(--table-header-button);
+}
+
+.tl-table__header-cell--is-sorted:hover {
+  background-color: var(--table-header-button-hover);
+}
+
+.tl-table__header-cell--is-sorted .tl-table__header-button-icon {
+  opacity: 1;
+}
+
+.tl-table__header-cell--is-sorted .tl-table__header-button-icon--rotate {
+  transform: rotate(180deg);
+}
+
+.tl-table__body-cell {
+  display: table-cell;
+  padding: 16px;
+  background-color: transparent;
+  color: var(--table-text);
+  font-family: var(--detail-02-font-family);
+  font-size: var(--detail-02-font-size);
+  line-height: var(--detail-02-line-height);
+  font-weight: var(--detail-02-font-weight);
+  letter-spacing: var(--detail-02-letter-spacing);
+  text-transform: var(--detail-02-text-transform);
+  transition: background-color 200ms ease;
+  min-width: 192px;
+}
+.tl-table__body-cell:focus {
+  background-color: var(--table-input-focus);
+}
+.tl-table__body-cell:hover:not(.tl-table__body-cell--checkbox) {
+  background-color: var(--table-body-cell-hover);
+}
+.tl-table__row--expanded .tl-table__body-cell:hover:not(.tl-table__body-cell--checkbox) {
+  background-color: var(--table-body-row-selected);
+}
+.tl-table__body-cell--column-highlight {
+  background-color: var(--table-body-cell-hover);
+}
+.tl-table__body-cell--checkbox, .tl-table__body-cell--expand {
+  min-width: 48px;
+  width: 48px;
+  padding: 0;
+  text-align: center;
+  background-color: inherit;
+}
+.tl-table--compact .tl-table__body-cell {
+  height: 32px;
+  padding: 8px 16px;
+}
+.tl-table--no-min-width .tl-table__body-cell {
+  min-width: unset;
+}
+.tl-table--vertical-dividers .tl-table__body-cell:not(:last-child):not(.tl-table__body-cell--expand) {
+  border-right: 1px solid var(--table-divider);
+}
+.tl-table--zebra-columns-odd .tl-table__body-cell:nth-child(odd) {
+  background-color: var(--table-zebra-mode);
+}
+.tl-table--zebra-columns-even .tl-table__body-cell:nth-child(even) {
+  background-color: var(--table-zebra-mode);
+}
+.tl-table--cell-text-align-left .tl-table__body-cell {
+  text-align: left;
+}
+.tl-table--cell-text-align-start .tl-table__body-cell {
+  text-align: start;
+}
+.tl-table--cell-text-align-center .tl-table__body-cell {
+  text-align: center;
+}
+.tl-table--cell-text-align-right .tl-table__body-cell {
+  text-align: right;
+}
+.tl-table--cell-text-align-end .tl-table__body-cell {
+  text-align: end;
+}
+.tl-table--no-padding .tl-table__body-cell {
+  padding: 0;
+}
+.tl-table__row:hover:not(.tl-table__row--expanded) .tl-table__body-cell {
+  background-color: var(--table-body-row-hover);
+}
+.tl-table__row--selected:hover:not(.tl-table__row--expanded) .tl-table__body-cell {
+  background-color: var(--table-body-row-selected-hover);
+}
+.tl-table__row--expanded .tl-table__body-cell {
+  background-color: var(--table-body-row-selected);
+}
+
+.tl-table__toolbar {
+  box-sizing: border-box;
+}
+.tl-table__toolbar * {
+  box-sizing: border-box;
+}
+.tl-table__toolbar {
+  display: table-caption;
+  position: relative;
+  background-color: var(--table-toolbar);
+  color: var(--table-text);
+  padding: 0 var(--tds-spacing-element-16);
+  height: 64px;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+}
+.tl-table--compact .tl-table__toolbar {
+  height: 56px;
+}
+
+.tl-table__upper-bar {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+
+.tl-table__actionbar-left {
+  display: flex;
+  align-items: center;
+}
+
+.tl-table__title {
+  font-family: var(--headline-07-font-family);
+  font-size: var(--headline-07-font-size);
+  line-height: var(--headline-07-line-height);
+  font-weight: var(--headline-07-font-weight);
+  letter-spacing: var(--headline-07-letter-spacing);
+  text-transform: var(--headline-07-text-transform);
+  display: flex;
+  align-self: baseline;
+  text-align: left;
+  letter-spacing: var(--tds-headline-07-ls);
+  padding-top: var(--tds-spacing-element-16);
+  margin-right: var(--tds-spacing-element-8);
+}
+
+.tl-table__actionbar-right {
+  display: flex;
+  align-self: center;
+  column-gap: 8px;
+  position: relative;
+}
+
+.tl-table__actionbar-right .tl-text-field:not(.tl-text-field--input-visible) {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: pointer;
+  width: 40px;
+  min-width: 40px;
+  max-width: 40px;
+  height: 40px;
+}
+
+.tl-table__actionbar-right .tl-text-field:not(.tl-text-field--input-visible) .tl-text-field__input {
+  display: none;
+}
+
+.tl-table__actionbar-right .tl-text-field:not(.tl-text-field--input-visible)::before {
+  content: "";
+  position: absolute;
+  width: 40px;
+  height: 40px;
+  border-radius: 4px 4px 0 0;
+  background-color: transparent;
+  transition: background-color 250ms ease;
+  right: 6px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.tl-table__actionbar-right .tl-text-field:not(.tl-text-field--input-visible) .tl-text-field__suffix--icon {
+  position: absolute;
+  right: 16px;
+  top: 50%;
+  transform: translateY(calc(-50% - 1px));
+  z-index: 1;
+  pointer-events: none;
+}
+
+.tl-table__actionbar-right .tl-text-field:not(.tl-text-field--input-visible):hover::before {
+  background-color: var(--table-toolbar-searchbar-hover);
+}
+
+.tl-table__header-input-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.tl-table__header-input-wrapper .tl-icon {
+  color: var(--table-input-header-icon);
+  position: absolute;
+  left: 15px;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1;
+  pointer-events: none;
+}
+
+.tl-table__header-input {
+  box-sizing: border-box;
+  font-family: var(--detail-02-font-family);
+  font-size: var(--detail-02-font-size);
+  line-height: var(--detail-02-line-height);
+  font-weight: var(--detail-02-font-weight);
+  letter-spacing: var(--detail-02-letter-spacing);
+  text-transform: var(--detail-02-text-transform);
+  color: var(--table-text);
+  padding: 0 var(--tds-spacing-element-16);
+  width: 100%;
+  border-radius: 0;
+  background-color: transparent;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  outline: none;
+}
+.tl-table--compact .tl-table__header-input {
+  height: 32px;
+}
+.tl-table__header-input {
+  padding-left: 35px;
+  height: 48px;
+}
+.tl-table__header-input::placeholder {
+  color: var(--table-input-header-placeholder);
+}
+.tl-table__header-input:focus {
+  background-color: var(--table-input-header-focus);
+  border-bottom: 2px solid var(--color-foreground-border-accent-focus);
+}
+
+.tl-table__body-cell .tl-text-field {
+  height: 48px;
+  min-width: auto;
+  padding-bottom: 0;
+  cursor: pointer;
+}
+
+.tl-table--compact .tl-table__body-cell .tl-text-field {
+  height: 32px;
+}
+
+.tl-table__body-cell .tl-text-field .tl-text-field__input,
+.tl-table__body-cell .tl-text-field .tl-text-field__input:hover {
+  box-shadow: 0 0 0 0 transparent;
+}
+
+.tl-table__body-cell .tl-text-field .tl-text-field__input:focus {
+  box-shadow: inset var(--text-field-box-shadow-focus);
+  background-color: var(--table-input-focus);
+}
+
+.tl-table--compact .tl-table__body-cell .tl-text-field .tl-text-field__input {
+  height: 32px;
+}
+
+.tl-table__body-cell .tl-text-field .tl-text-field__suffix--icon {
+  display: none;
+}
+
+.tl-table__body-cell .tl-text-field:hover .tl-text-field__suffix--icon,
+.tl-table__body-cell .tl-text-field:has(.tl-text-field__input:focus) .tl-text-field__suffix--icon {
+  display: inline-block;
+}
+
+.tl-table__body-cell .tl-text-field.tl-text-field--disabled .tl-text-field__suffix--icon {
+  display: inline-block;
+}
+
+.tl-table__body-cell--expand {
+  position: relative;
+}
+.tl-table--compact .tl-table__body-cell--expand {
+  padding: 0;
+}
+.tl-table__body-cell--expand:has(.tl-table__expand-input:focus), .tl-table__body-cell--expand:has(.tl-table__expand-input:focus-visible), .tl-table__body-cell--expand:has(.tl-table__expand-input:active) {
+  outline: 2px solid var(--table-header-button-focus);
+  box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
+  outline-offset: -1px;
+  z-index: 1;
+}
+
+.tl-table__expand-control-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 46px;
+  cursor: pointer;
+  padding: 0 16px;
+  position: relative;
+}
+.tl-table--compact .tl-table__expand-control-container {
+  height: 30px;
+}
+
+.tl-table__expand-input {
+  all: unset;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  cursor: pointer;
+}
+
+.tl-table__expand-icon {
+  height: 16px;
+  width: 16px;
+  transition: transform 200ms ease;
+  transform: rotate(0);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--table-text);
+}
+
+.tl-table__row--expanded {
+  background-color: var(--table-body-row-selected);
+  border-bottom: none;
+}
+
+.tl-table__row--expanded .tl-table__expand-icon {
+  transform: rotate(180deg);
+}
+
+.tl-table__expand-row {
+  display: none;
+  transition: background-color 200ms ease;
+  background-color: var(--table-body-row-selected);
+  border-bottom: 1px solid var(--table-divider);
+}
+.tl-table__expand-row--expanded {
+  display: table-row;
+}
+
+.tl-table__expand-row-cell {
+  max-width: 1px;
+  overflow: auto;
+  padding: 16px 16px 16px 66px;
+  color: var(--table-text);
+  background-color: var(--table-body-row-selected);
+}
+.tl-table__expand-row-cell::-webkit-scrollbar {
+  height: var(--tl-scrollbar-height);
+}
+.tl-table__expand-row-cell::-webkit-scrollbar-track {
+  background: var(--tl-scrollbar-track-color);
+}
+.tl-table__expand-row-cell::-webkit-scrollbar-thumb {
+  border-radius: 40px;
+  background: var(--tl-scrollbar-thumb-color);
+  border-width: var(--tl-scrollbar-thumb-border-width);
+  border-style: solid;
+  border-color: transparent;
+  background-clip: padding-box;
+}
+.tl-table__expand-row-cell::-webkit-scrollbar-thumb:hover {
+  border-width: var(--tl-scrollbar-thumb-border-hover-width);
+}
+.tl-table__expand-row-cell::-webkit-scrollbar-button {
+  height: 0;
+  width: 0;
+}
+@supports not selector(::-webkit-scrollbar) {
+  .tl-table__expand-row-cell {
+    scrollbar-color: var(--tl-scrollbar-thumb-color) var(--tl-scrollbar-track-color);
+    scrollbar-width: var(--tl-scrollbar-width-standard);
+  }
+}
+.tl-table--compact .tl-table__expand-row-cell {
+  padding: 8px 16px 8px 66px;
+}
+.tl-table__expand-row-cell--overflow-visible {
+  overflow: visible;
+}
+.tl-table__expand-row-cell--overflow-hidden {
+  overflow: hidden;
+}
+
+.tl-table.tl-table--primary .tl-text-field__input {
+  background-color: var(--component-table-cell);
+}
+.tl-table.tl-table--secondary .tl-text-field__input {
+  background-color: var(--component-table-secondary-cell);
+}
+
+.tl-table--compact .tl-table__header-cell--checkbox {
+  padding-left: 16px;
+}
+
+.tl-table__header-cell--checkbox {
+  padding: 16px;
+}
+
+.tl-table__body-cell--checkbox {
+  padding: 16px;
+}