styles.module.scss

// Variables

@import '../../../shared/variables.scss';

$nested-row-padding: 1.35rem;
$row-border: 1px solid $border-color;

$edge-padding: 0.8rem;
$cell-padding: 0.5rem;
$workspace-row-edge-margin: $edge-padding - $cell-padding;

// Extendable Silent Rules
%expandableRowArrow {
  width: 8px;
  height: 8px;
  top: 0;
  left: 0;
  display: inline-block;
  position: absolute;
  border: 2px solid $row-action-icon-color;
  border-top: unset;
  border-left: unset;
  transition: transform 0.2s, right 0.2s, bottom 0.2s;
  margin: 12px 6px;
}

%truncateLeftParent {
  overflow: hidden;
  text-overflow: ellipsis;
}

%truncateLeftChild {
  overflow: hidden;
  text-overflow: ellipsis;
  unicode-bidi: isolate;
  direction: ltr;
}

%headerCellPadding {
  padding: 0.1em 0;
}

%baseInnerCell {
  display: flex;
  flex-flow: row nowrap;
  padding: 0 $cell-padding;
  align-items: center;
  width: 100%;
  height: 100%;
  &:hover {
    & .copyButton {
      display: block;
    }
  }
}

.hidden {
  visibility: hidden;
}

.iconMenu {
  position: absolute;
  left: 0;
  bottom: 0;
  padding-bottom: 3.5px;

  ul[role='menu'] {
    background-color: $header-bg-color;
    padding-left: 2px;
    margin: 0;
    border: none;

    button {
      width: 13px;
      height: 11px;
      svg {
        fill: currentColor;
        transform: scale(0.7);
      }
    }
  }
}

.moveToRight {
  left: auto;
  right: 0;
}

// Concrete selectors

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

.bullet {
  color: $fg-color;
  display: inline-block;
  width: 24px;
  flex: 0 0 24px;
  text-align: center;
  position: relative;
  .queuedExperiment & svg {
    height: 12px;
  }

  &::before {
    display: inline-block;
    margin: 0 5px;
    position: relative;
    content: '';
    border-radius: 99px;
    width: 6px;
    height: 6px;
    z-index: 2;

    .normalExperiment & {
      line-height: 0;
      background: currentColor;
      border-radius: 100%;
    }

    .workspaceWithChanges.normalExperiment & {
      background-color: $changed-color;
    }

    .unselectedExperiment & {
      width: 4px;
      height: 4px;
      vertical-align: middle;
      border: 1px solid currentColor;
      background-color: $bg-color;
    }

    .unselectedExperiment:not(.rowSelected):hover & {
      background-image: linear-gradient(
          $row-hover-background-color,
          $row-hover-background-color
        ),
        linear-gradient($bg-color, $bg-color);
    }

    .workspaceWithChanges.unselectedExperiment & {
      border: 1px solid $changed-color;
    }

    .rowSelected.unselectedExperiment & {
      background-image: linear-gradient(
          $row-bg-selected-color,
          $row-bg-selected-color
        ),
        linear-gradient($bg-color, $bg-color);
    }

    .queuedExperiment & {
      display: none;
    }
    .runningExperiment & {
      width: 4px;
      height: 4px;
      vertical-align: middle;
      border: 1.5px solid $row-bg-color;
      border-radius: 100%;
      border-right: 1.5px solid currentColor;
      border-top: 1.5px solid currentColor;
      animation: spin 1s cubic-bezier(0.53, 0.21, 0.29, 0.67) infinite;
      background-color: $bg-color;
    }

    .runningExperiment:not(.rowSelected):hover & {
      background-image: linear-gradient(
          $row-hover-background-color,
          $row-hover-background-color
        ),
        linear-gradient($bg-color, $bg-color);
      border-left-color: $row-hover-background-color;
      border-bottom-color: $row-hover-background-color;
    }

    .workspaceWithChanges.runningExperiment & {
      border-right-color: $changed-color;
      border-top-color: $changed-color;
    }

    .rowSelected.runningExperiment & {
      background-image: linear-gradient(
          $row-bg-selected-color,
          $row-bg-selected-color
        ),
        linear-gradient($bg-color, $bg-color);
      border-left-color: $row-bg-selected-color;
      border-bottom-color: $row-bg-selected-color;
    }
  }
}

.rowArrowContainer {
  width: 20px;
  height: 32px;
  padding: 0;
  flex: 0 0 20px;
  display: inline-block;
  position: relative;
  border: none;
  background: none;
  cursor: pointer;
}

.expandedRowArrow {
  @extend %expandableRowArrow;
  transform: rotate(45deg);
  right: 1px;
  bottom: 2px;
}

.contractedRowArrow {
  @extend %expandableRowArrow;
  transform: rotate(-45deg);
  right: 4px;
  bottom: 0;
}

.rowGroup:last-child > .tr:last-child {
  border-color: $row-bg-color;

  &.rowSelected {
    border-color: $row-bg-selected-color;
  }
}

.experiments {
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;

  .experimentGroup {
    &:last-child .tr:last-child {
      border-color: $row-bg-color;

      &.rowSelected {
        border-color: $row-bg-selected-color;
      }
    }

    .nestedRow {
      .experimentCell {
        padding-left: $nested-row-padding;

        .innerCell {
          .rowActions {
            left: calc(($cell-padding + $nested-row-padding) * -1);
          }
        }
      }
    }
    &.expandedGroup .nestedRow {
      .bullet {
        &::after {
          content: '';
          height: calc(100% + 1px);
          top: -1px;
          right: calc(50% - 0.5px);
          position: absolute;
          border-right: 1px dotted rgb(127, 127, 127);
          clip-path: inset(0.05rem 0 0 0);
        }
      }
      &:first-of-type {
        .bullet::after {
          height: calc(50% + 1px);
          top: 50%;
          clip-path: inset(0 0 0 0);
        }
      }
      &:last-of-type {
        .bullet::after {
          height: 50%;
        }
      }
    }
  }
  ul {
    padding-left: 1rem;
  }
  .tableContainer {
    overflow: auto;
    flex: 1;
    background-color: $experiments-view-bg-color;
  }
  .table {
    display: inline-block;
    border-collapse: collapse;
  }
  summary {
    white-space: nowrap;
    cursor: pointer;
    h2,
    h3 {
      margin: 0.25em;
      white-space: nowrap;
      display: inline-block;
    }
  }

  .depthSpacer {
    width: 1rem;
  }

  .tr {
    position: relative;
    background-color: $row-bg-color;

    &:hover.rowSelected {
      &:after {
        box-shadow: inset 0 0 20px $shadow;
        content: '';
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        z-index: 4;
        position: absolute;
        pointer-events: none;
      }

      .td:hover,
      .td:hover + .td {
        border-left-color: $row-border-selected-color;
      }
    }

    &:hover:not(.rowSelected) {
      .td:not(.experimentCell),
      .experimentCell:before {
        background-color: $row-hover-background-color;
      }

      .td:hover,
      .td:hover + .td {
        border-left-color: $border-color;
      }
    }

    > *:first-child {
      position: sticky;
      left: 0;
      z-index: 3;

      &:after {
        content: '';
        height: 100%;
        position: absolute;
        top: 0;
        width: 6px;
        right: 0;
        transition: box-shadow 0.25s;
      }
    }

    &.rowSelected {
      border-color: $row-border-selected-color;

      .td {
        background-color: $row-bg-selected-color;
        color: $row-fg-selected-color;
      }

      > *:first-child {
        background-color: $row-bg-color;

        &:before {
          background-color: $row-bg-selected-color;
        }
      }

      .expandedRowArrow,
      .contractedRowArrow {
        border-color: $row-action-selected-icon-color;
      }
    }
  }

  .table.withExpColumnShadow .tr > *:first-child:after {
    box-shadow: 3px 0px 3px $shadow;
  }

  .bodyRow {
    border-bottom: $row-border;

    &:not(.rowSelected) {
      & > *:first-child {
        background-color: $row-bg-color;
      }
    }
  }

  .headRow {
    font-size: 0.7rem;

    .headerCellWrapper {
      @extend %truncateLeftParent;
      opacity: 0.6;
    }
    .cellContents {
      @extend %truncateLeftChild;
      display: block;

      span[draggable='true'] {
        display: block;
        cursor: grab;
      }
    }

    & > *:first-child {
      background-color: $header-bg-color;
    }

    &:last-child,
    .firstLevelHeader {
      .paramHeaderCell,
      &.paramHeaderCell {
        color: $params-color;
      }

      .metricHeaderCell,
      &.metricHeaderCell {
        color: $metrics-color;
      }

      .depHeaderCell,
      &.depHeaderCell {
        color: $deps-color;
      }
    }

    &:last-child {
      font-size: 0.7rem;

      .headerCell {
        text-align: right;
      }

      .headerCellWrapper {
        opacity: 1;
      }

      .experimentHeader {
        @extend %headerCellPadding;
        padding-left: $cell-padding;
        text-align: left;
        direction: ltr;
        overflow-x: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  .workspaceRowGroup {
    border: none;
    position: sticky;
    top: var(--table-head-height);
    z-index: 4;
    background-color: $row-bg-color;

    &.withShadow {
      box-shadow: 0 5px 8px -2px $shadow;

      .tr {
        border-bottom: none;
      }
    }

    .td {
      line-height: 3rem;
    }

    .innerCell {
      .rowActions {
        visibility: hidden;
      }
    }

    .innerCell,
    .timestampInnerCell {
      height: 100%;
      width: 100%;
      background-color: none;
    }
  }

  .workspaceChange,
  .depChange {
    color: $changed-color;
  }

  .td,
  .th {
    white-space: nowrap;
    min-width: 0;
    position: relative;
    background-color: $row-bg-color;
  }
  .th {
    height: auto;
    background-color: $header-bg-color;
  }
  .td {
    height: auto;
    font-size: 0.8rem;
    line-height: 2rem;
    align-items: center;
    border-right: 1px solid transparent;
    border-left: 1px solid transparent;

    &:first-child {
      .innerCell {
        padding-left: $edge-padding;
      }
    }

    &:last-child {
      .innerCell {
        padding-right: $edge-padding;
      }
    }
  }
  .experimentCell {
    display: flex;
    flex-flow: row nowrap;
    text-align: left;
    border-right: none;
    border-left: none;

    .innerCell {
      justify-content: flex-start;

      .bullet,
      .cellContents {
        cursor: pointer;
      }

      .rowActions {
        display: inline-flex;
        align-items: center;
        position: relative;
        left: -$cell-padding;
        height: 100%;

        &:first-child {
          margin-right: 2px;
        }

        .starSwitch {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 14px;
          cursor: pointer;

          &[aria-checked='true'] {
            opacity: 1;
          }
        }

        .indicatorIcon {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 1.3rem;
          height: 100%;
          padding: 0;
          margin: 0;
        }

        .indicatorCount {
          z-index: 2;
          &[title='0'] {
            display: none;
          }
        }
      }
    }
  }

  .placeholderHeaderCell {
    background-color: $header-bg-color;
    border-left: 1px solid $header-border-color;
    padding: 0.31rem $cell-padding;

    &:first-child {
      border-left: none;
    }
  }

  .headerCell {
    @extend .placeholderHeaderCell;
    color: $header-fg-color;
    text-align: center;
    border-bottom: 1px solid $header-border-color;

    &.leafHeader {
      border-bottom: none;
    }
  }
}

.experimentCell .rowActions .starSwitch svg {
  fill: $row-action-icon-color;

  .rowSelected & {
    fill: $row-action-selected-icon-color;
  }
}

.cellHintTooltip {
  font-size: 0.65rem;
}

.webviewHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

%arrow {
  background: none;
  border: none;
  color: $header-fg-color;
  position: absolute;
  top: 5px;
}

.arrowLeft {
  @extend %arrow;
  left: -2px;
}

.arrowRight {
  @extend %arrow;
  right: -2px;
}

.draggingColumn {
  border: 1px solid $fg-color;
  font-size: 0.7rem;
  opacity: 0.7;
}

.staticColumn {
  transform: translate(0, 0) !important;
}

.isDroppedColumn {
  transition-duration: 100;
}

.dndPlaceholder {
  display: none;
}

.columnResizer {
  right: -4px;
  width: 10px;
  height: 500%;
  position: absolute;
  bottom: 0;
  z-index: 1;
  touch-action: none;
  cursor: col-resize;

  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    background-color: $header-resizer-color;
    display: none;
  }

  &:hover::after,
  &.isResizing::after {
    display: block;
  }
}

.copyButton {
  display: none;
}

.cellContents {
  overflow: hidden;
  text-overflow: ellipsis;
}

.error {
  color: $error-color;
}

.errorIcon {
  margin-left: 6px;
  margin-top: 3px;
}

.errorTooltip {
  white-space: pre-wrap;
  display: flex;
  gap: 4px;

  svg {
    min-width: 16px;
    min-height: 16px;
  }
}

.headerCellWrapper {
  @extend %headerCellPadding;
}

.experimentCellContents {
  display: flex;
  flex-flow: row wrap;
  line-height: normal;
  text-overflow: ellipsis;
  direction: ltr;
  align-items: center;
  cursor: text;

  > * {
    margin: 0 0.25em;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.experimentCellSecondaryName {
  color: $meta-cell-color;
  font-size: 0.8em;
}

.innerCell {
  @extend %baseInnerCell;
  justify-content: flex-end;
}

.timestampInnerCell {
  @extend %baseInnerCell;
  @extend %truncateLeftParent;
  line-height: normal;
  text-align: left;
}

.timestampDate {
  @extend %truncateLeftChild;
  font-size: 0.7em;
}
.timestampTime {
  @extend %truncateLeftChild;
  font-size: 0.9em;
}

.timestampHeader {
  @extend %headerCellPadding;
  overflow-x: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.thead {
  background-color: $bg-color;
  border-bottom: $row-border;
  transition: 0.25s all;
  box-shadow: none;
  position: sticky;
  top: 0;
  z-index: 5;
}

.tableIndicators {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 4;
  font-size: 0.7rem;
  padding: 0.2rem 0.5rem;
}

$badge-size: 0.85rem;

.indicatorIcon {
  display: inline-block;
  position: relative;
  border: none;
  background: none;
  padding: 0;
  text-align: center;
  padding: 0.25rem;
  margin: 0.025rem;
  width: 1.5rem;
  height: 1.5rem;
  cursor: pointer;
  svg {
    fill: $watermark-color;
  }
  &.indicatorWithCount svg {
    fill: $fg-color;
  }
}

.indicatorCount {
  position: absolute;
  bottom: 3px;
  right: -2px;
  font-weight: bold;
  background-color: $indicator-badge-background;
  color: $indicator-badge-foreground;
  border-radius: 100%;
  width: $badge-size;
  height: $badge-size;
  line-height: $badge-size;
  text-align: center;
  vertical-align: middle;
  font-size: 0.5rem;
}

.cellTooltip {
  padding: 2px 6px;
}

.indicatorCount {
  &[aria-label='0'] {
    display: none;
  }
}

.experimentCell {
  &:before {
    content: '';
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    background-color: transparent;
  }

  .innerCell {
    .indicatorCount {
      display: none;
      .experimentGroup & {
        display: block;
        &[aria-label='0'] {
          display: none;
        }
      }
      .experimentGroup.expandedGroup & {
        display: none;
      }
    }
  }
}

.noSelect {
  user-select: none;
}

.isColumnResizing {
  @extend .noSelect;
  cursor: col-resize;

  * {
    cursor: col-resize;
  }
}