@scania/tegel-lite 0.1.0 → 1.0.0

package/dist/tl-table.css

@@ -1,827 +0,0 @@
-: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;
-}