@import '../../../styles/common.scss';

.columnsRoot {
  padding: 1px 0px 1px 5px;
  display: grid;
  justify-items: left;
  align-items: center;
  border-bottom: var(--explorer-list-row-border, $explorer-list-row-border);

  cursor: pointer;

  &.selected {
    background-color: var(
      --explorer-row-hover-background-color,
      $explorer-row-hover-background-color
    ) !important;
  }

  &:hover {
    background-color: var(
      --explorer-row-hover-background-color,
      $explorer-row-hover-background-color
    );

    .selectionCheckMark {
      opacity: 1;
    }
  }

  &.disabled {
    cursor: not-allowed;
    color: var(--disabled-text-color, var(--list-row-disabled-text-color, $list-row-disabled-text-color));
  }

  .actions {
    display: grid;
    grid-template-rows: 1fr;
    grid-auto-flow: column;
    grid-gap: 8px;
    margin-left: auto;
  }

  .content {
    display: contents;
  }

  .link {
    color: inherit;
    text-decoration: none;
  }

  .selectionCheckMark {
    opacity: 0;
  }
}
