.o-spreadsheet {
  .o-cf-preview {
    &.o-cf-cursor-ptr {
      cursor: pointer;
    }

    height: 80px;
    padding: 10px;
    position: relative;
    cursor: pointer;
    &:hover,
    &.o-cf-dragging {
      background-color: var(--os-gray-200);
    }

    &:not(:hover) .o-cf-delete-button {
      display: none !important;
    }
    .o-cf-preview-icon {
      height: 50px;
      width: 50px;
      .o-icon {
        width: var(--os-cf-icon-edge-length);
        height: var(--os-cf-icon-edge-length);
      }
    }
    .o-cf-preview-description {
      .o-cf-preview-description-rule {
        margin-bottom: 4px;
        max-height: 2.8em;
        line-height: 1.4em;
      }
      .o-cf-preview-range {
        font-size: 12px;
      }
    }
    &:not(:hover):not(.o-cf-dragging) .o-cf-drag-handle {
      display: none !important;
    }
    .o-cf-drag-handle {
      left: 2px;
      cursor: move;
      .o-icon {
        width: 6px;
        height: 30px;
      }
    }

    .o-icon.arrow-down {
      color: var(--os-red-arrow-color);
    }
    .o-icon.arrow-up {
      color: var(--os-green-arrow-color);
    }
  }
}