@use './entity-finder' as EntityFinder;
@use '../../abstracts/mixins' as SrcMixins;

.DetailsViewReflexElement {
  .EntityFinderDetailsView {
    height: calc(
      var(--entity-finder-height) - var(--entity-finder-breadcrumb-height)
    );
    border-bottom: 1px solid var(--synapse-border-color-gray);
  }
}
.DetailsViewTable {
  .DetailsViewTable__header {
    box-shadow: 3px 3px 7px -1px rgba(0, 0, 30, 0.2);
  }
}

.EntityFinderDetailsView {
  height: var(--entity-finder-height);
  background-color: var(--synapse-background-color-gray-light);
  overflow-y: hidden;
}

.EntityFinderDetailsViewPlaceholder {
  @include SrcMixins.placeholder;
  .SearchPlaceholderImage {
    height: 150px;
    margin: 20px;
  }
}

.EntityFinderDetailsViewRow {
  height: 45px;
  transition: background-color 200ms ease-in;

  // Select odd rows (data-index ends in an odd number)
  // Don't use nth child because the virtual rows can switch indicies, causing style to flip for the same cell
  &[data-index$='1'],
  &[data-index$='3'],
  &[data-index$='5'],
  &[data-index$='7'],
  &[data-index$='9'] {
    background: var(--synapse-background-color-gray);
  }

  &[aria-disabled='false'][aria-selected='false']:hover {
    @include EntityFinder.hover();
  }

  &[aria-disabled='false'][aria-selected='true']:hover {
    @include EntityFinder.hover(
      var(--entity-finder-selected-hover-background-color)
    );
  }

  &[aria-selected='true'] {
    background-color: var(--entity-finder-selected-background-color);
  }

  &[aria-disabled='true'] {
    opacity: 0.5;
  }

  &[aria-disabled='false'] {
    cursor: pointer;
  }

  &[aria-hidden='true'] {
    display: none;
  }

  .EntityFinderTableCellContainerLink {
    @include SrcMixins.normalLink();
    // Add cursor: pointer in case the link is in a disabled (unselectable) row
    cursor: pointer;
    width: fit-content;
  }

  .EntityFinderTableCellEntityIcon svg {
    width: 20px;
  }

  td > * {
    max-width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: block;
  }
}