/*
  layout: .a-table--fixed (auto default)
  hoverable rows: .a-table--interactive (non-hoverable by default)
*/

.a-table {
  --cell-px: var(--lens-semantic-spacing-desktop-padding-1-5);
  --cell-py: var(--lens-semantic-spacing-desktop-padding-1-5);
  border-collapse: collapse;
  width: 100%;
  &.a-table--interactive {
    & .a-table-row:hover {
      background: var(--hover-bg);
    }
  }
  &.a-table--fixed {
    table-layout: fixed;
  }
}

.a-table-header-row {
  --header-row-height: var(--a-table-header-row-height, var(--lens-core-spacing-5));
  &:first-of-type {
    --a-table-head-radius: var(--lens-semantic-radius-lg);
  }
}

.a-table-head {
  --align: var(--a-table-head-align, start);
  --bg: var(--a-table-head-bg, var(--lens-semantic-color-surface-variant));
  --radius: var(--a-table-head-radius, var(--lens-semantic-radius-none));
  --gap: var(--a-table-head-gap, var(--lens-semantic-spacing-desktop-gap-0-5));
  --border-color: var(--a-table-head-border-color, var(--lens-semantic-color-ui-divider-default));
  --border-width: var(--a-table-head-border-width, var(--lens-semantic-border-width-thin));
  --width: var(--a-table-cell-width, initial);
  --max-width: var(--a-table-cell-max-width, unset);
  --min-width: var(--a-table-cell-min-width, unset);
  box-sizing: border-box;
  text-align: var(--align);
  padding-inline: var(--a-table-cell-px, var(--cell-px));
  padding-block: 0;
  height: var(--header-row-height);
  width: var(--width);
  max-width: var(--max-width);
  min-width: var(--min-width);
  background: var(--bg);
  border-block-end: var(--border-width) solid var(--border-color);
  &:first-of-type {
    border-start-start-radius: var(--radius);
  }
  &:last-of-type {
    border-start-end-radius: var(--radius);
  }
  &.a-table-head--center {
    --align: var(--a-table-head-align, center);
  }
  &.a-table-head--end {
    --align: var(--a-table-head-align, end);
    --a-table-head-content-direction: row-reverse;
  }
  &.a-table-head--checkbox {
    width: var(--lens-core-spacing-3);
  }
  &:has(.a-table-head-sort-button:not(.a-table-head-sort-button--active)) {
    &:hover,
    &:focus-visible {
      --a-table-head-sort-button-offset: 0;
      --a-table-head-sort-button-opacity: 1;
      --a-table-head-sort-button-pointer-events: all;
    }
  }
  &:focus-visible {
    outline: var(--lens-semantic-border-width-focus-width) solid
      var(--lens-semantic-color-ui-focus-ring);
    outline-offset: calc(-2 * var(--lens-semantic-border-width-focus-offset));
  }
}

.a-table-head-content {
  --direction: var(--a-table-head-content-direction, row);
  display: flex;
  flex-direction: var(--direction);
  gap: var(--gap);
  align-items: center;
  justify-content: space-between;
}

.a-table-head-label {
  --max-lines: var(--a-table-head-max-lines, 1);
  --font-size: var(--a-table-head-label-font-size, var(--lens-semantic-font-label-sm-font-size));
  --line-height: var(
    --a-table-head-label-line-height,
    var(--lens-semantic-font-label-sm-line-height)
  );
  --letter-spacing: var(
    --a-table-head-label-letter-spacing,
    var(--lens-semantic-font-label-sm-letter-spacing)
  );
  --font-weight: var(--a-table-head-label-font-weight, var(--lens-semantic-font-weight-emphasis));
  display: -webkit-box;
  font-size: var(--font-size);
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing);
  font-weight: var(--font-weight);
  max-height: calc(var(--max-lines) * var(--line-height));
  overflow: hidden;
  text-overflow: ellipsis;
  line-clamp: var(--max-lines);
  -webkit-line-clamp: var(--max-lines);
  -webkit-box-orient: vertical;
}

.a-table-head-sort-button {
  --display: var(--a-table-head-sort-button-display, none);
  --opacity: var(--a-table-head-sort-button-opacity, 0);
  --icon-opacity: var(--a-table-head-sort-button-icon-opacity, 0.6);
  --offset: var(
    --a-table-head-sort-button-offset,
    calc(var(--lens-core-spacing-4) + 2 * var(--gap))
  );
  --pointer-events: var(--a-table-head-sort-button-pointer-events, none);
  opacity: var(--opacity);
  pointer-events: var(--pointer-events);
  & svg {
    opacity: var(--icon-opacity);
  }
  &:focus-visible {
    --offset: 0;
    --opacity: var(--a-table-head-sort-button-opacity, 1);
    --icon-opacity: var(--a-table-head-sort-button-icon-opacity, 0.6);
    --pointer-events: all;
  }
  &.a-table-head-sort-button--active {
    --offset: 0;
    --display: var(--a-table-head-sort-button-display, inline-flex);
    --opacity: var(--a-table-head-sort-button-opacity, 1);
    --icon-opacity: var(--a-table-head-sort-button-icon-opacity, 1);
  }
}

@container style(--align: start) or style(--align: center) {
  .a-table-head-sort-button {
    margin-inline-end: calc(-1 * var(--offset));
  }
}

@container style(--align: end) {
  .a-table-head-sort-button {
    margin-inline-start: calc(-1 * var(--offset));
  }
}

.a-table-row {
  --bg: var(--a-table-cell-bg, var(--lens-semantic-color-surface-default));
  --hover-bg: var(--a-table-row-hover-bg, var(--lens-semantic-color-action-secondary-hover-fill));
  --selected-bg: var(
    --a-table-row-selected-bg,
    var(--lens-semantic-color-action-secondary-active-fill)
  );
  --border-color: var(--a-table-row-border-color, var(--lens-semantic-color-ui-divider-default));
  --border-width: var(--a-table-row-border-width, var(--lens-semantic-border-width-thin));
  background: var(--bg);
  transition: background var(--a-transition-duration) var(--a-transition-easing);
  &.a-table-row--selected {
    background: var(--selected-bg);
  }
}

.a-table-cell {
  --align: var(--a-table-cell-align, start);
  --width: var(--a-table-cell-width, unset);
  --max-width: var(--a-table-cell-max-width, unset);
  --min-width: var(--a-table-cell-min-width, unset);
  --gap: var(--a-table-cell-gap, var(--lens-semantic-spacing-desktop-gap-0-5));
  --icon-size: var(--a-table-cell-icon-size, var(--lens-semantic-icon-size-lg));
  --icon-color: var(--a-table-cell-icon-color, var(--lens-semantic-color-type-muted));
  box-sizing: border-box;
  text-align: var(--align);
  width: var(--width);
  max-width: var(--max-width);
  min-width: var(--min-width);
  padding-inline: var(--a-table-cell-px, var(--cell-px));
  padding-block: 0;
  box-shadow: inset 0 calc(-1 * var(--border-width)) 0 0 var(--border-color);
  &.a-table-cell--center {
    --align: var(--a-table-cell-align, center);
  }
  &.a-table-cell--end {
    --align: var(--a-table-cell-align, end);
  }
  &.a-table-cell--numeric {
    font-variant-numeric: tabular-nums;
  }
  & svg {
    width: var(--icon-size);
    height: var(--icon-size);
    fill: var(--icon-color);
    flex-shrink: 0;
  }
  &:focus-visible {
    outline: var(--lens-semantic-border-width-focus-width) solid
      var(--lens-semantic-color-ui-focus-ring);
    outline-offset: calc(-2 * var(--lens-semantic-border-width-focus-offset));
  }
}

.a-table-cell-content {
  display: flex;
  gap: var(--gap);
  align-items: center;
  justify-content: var(--align);
}

.a-table-cell-text {
  --max-lines: var(--a-table-cell-max-lines, 1);
  --font-size: var(--a-table-cell-text-font-size, var(--lens-semantic-font-text-md-font-size));
  --line-height: var(
    --a-table-cell-text-line-height,
    var(--lens-semantic-font-text-md-line-height)
  );
  --letter-spacing: var(
    --a-table-cell-text-letter-spacing,
    var(--lens-semantic-font-text-md-letter-spacing)
  );
  --font-weight: var(--a-table-cell-text-font-weight, var(--lens-semantic-font-weight-regular));
  display: -webkit-box;
  margin-block: var(--a-table-cell-py, var(--cell-py));
  font-size: var(--font-size);
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing);
  font-weight: var(--font-weight);
  max-height: calc(var(--max-lines) * var(--line-height));
  gap: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  line-clamp: var(--max-lines);
  -webkit-line-clamp: var(--max-lines);
  -webkit-box-orient: vertical;
  & span + span {
    margin-inline-start: var(--gap);
  }
  &.a-table-cell-text--emphasis {
    --font-weight: var(--a-table-cell-text-font-weight, var(--lens-semantic-font-weight-emphasis));
  }
  &.a-table-cell-text--2-lines {
    --max-lines: var(--a-table-cell-max-lines, 2);
  }
  &.a-table-cell-text--3-lines {
    --max-lines: var(--a-table-cell-max-lines, 3);
  }
  &.a-table-cell-text--4-lines {
    --max-lines: var(--a-table-cell-max-lines, 4);
  }
}

.a-table-cell-symbol {
  --color: var(--a-table-cell-symbol-color, var(--lens-semantic-color-type-muted));
  color: var(--color);
}

.a-table-cell-actions {
  --gap: var(--a-table-cell-actions-gap, var(--lens-semantic-spacing-desktop-gap-1));
  display: flex;
  gap: var(--gap);
}