src/components/SearchResult/SearchResult.scss
@import '../../constants/styles';

.SearchResult {
  @include button-reset;
  border: solid transparent 1px;
  display: block;
  width: calc(100% - 4px);
  text-align: start;

  @include mobile {
    font-size: 13px;
  }

  cursor: pointer;
  border-radius: 4px;
  box-shadow: 0px 0px 3px 0px var(--box-shadow);
  padding: 10px 12px;
  margin-inline-start: 2px;
  margin-bottom: 8px;
  background: var(--component-background);
  word-break: break-all;

  .search-value {
    background: var(--yellow-1);
    word-break: break-all;
  }

  &.modular-ui {
    &.selected,
    &:hover {
      border: 1px solid var(--focus-border);
    }

    &.selected {
      background-color: var(--faded-component-background);
      box-shadow: none;
    }

    &:focus-visible {
      outline: var(--focus-visible-outline);
    }

    .search-value {
      font-weight: 700;
      color: var(--blue-5);
      background: none;
    }

    .search-title {
      color: var(--text-color);
      padding-bottom: 15px;
    }
  }
}

.results {
  &:dir(rtl) {
    .ReactVirtualized__Grid { 
      direction: rtl !important;
    }
  }
}

.spreadsheet-results {
  margin-block-end: 8em;

  @media (max-width: 640px) {
    margin-block-end: 2em;
  }
}