.sw-paragraph-result {
  --expander-width: var(--rhythm-3);
  align-items: start;
  display: flex;
  max-width: calc(100% - var(--rhythm-1));
  min-width: 0;

  .expander-button-container {
    transition: transform var(--transition-superfast);
    width: var(--expander-width);

    &.expanded {
      transform: rotate(90deg);
    }
  }

  .paragraph-result-container {
    display: flex;
    font-size: var(--font-size-medium);
    gap: var(--rhythm-1);
    line-height: var(--rhythm-3);
    transition:
      background-color var(--transition-superfast),
      color var(--transition-superfast);
    width: calc(100% - var(--expander-width));

    &:not(.stack) {
      align-items: center;
    }
    &.stack {
      flex-direction: column;
      gap: var(--rhythm-0_5);
      padding: var(--rhythm-2);
    }
    &.selected {
      background: var(--selected-background-color);
      color: var(--selected-text-color);
    }
    &:not(.disabled) {
      cursor: pointer;
    }

    .paragraph-text {
      overflow-wrap: break-word;
      &.ellipsis {
        height: var(--rhythm-3);
        :global(.markdown > *) {
          /* artificial ellipsis if the paragraph has several lines */
          &::after {
            content: '…';
          }
          /* regular ellipsis for single line that is too long */
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }

    .indicator-container {
      display: flex;
      flex: 0 0 auto;
    }
    .hidden {
      display: none;
    }
  }
}

@media (hover: hover) {
  .sw-paragraph-result {
    .paragraph-result-container:not(.stack) .paragraph-text {
      padding-right: var(--rhythm-1_5);
    }

    .paragraph-result-container:not(.selected):not(.disabled):hover,
    .paragraph-result-container:not(.selected):not(.disabled).hover {
      background-color: var(--hover-background-color);
    }

    .paragraph-result-container:not(.stack) {
      border-radius: var(--rhythm-1_5);
    }
  }
}
