@import "ui-variables";
@import "syntax-variables";

.datatip-element {
  background: @app-background-color;
  box-shadow: 0px 1px 4px 0px rgba(0,0,0,1);
  color: @syntax-text-color;
  font-family: Menlo, Monaco, Consolas, monospace;
  font-size: 80%;
  margin-top: -2px; // Compensate for shadow
  position: relative;
  white-space: nowrap;
  pointer-events: all;
}

.datatip-dragging {
  cursor: -webkit-grabbing;
  user-select: none;
}

.datatip-pinned {
  cursor: -webkit-grab;
}

.datatip-overlay {
  z-index: 12 !important; // HACK: exceed the z-index of
                          // .atom-dock-resize-handle-resizable, so that
                          // mouseleaves aren't triggered when the cursor enters
                          // the resizable
}

.datatip-pinned-overlay {
  &:extend(.datatip-overlay);
  pointer-events: none;
}

.datatip-container {
  background-color: @syntax-background-color;
  display: flex;
  position: relative;
  transition: background-color 0.15s ease;
  &:hover {
    background-color: mix(@syntax-background-color, @syntax-selection-color, 50%);
  }

  &:not(:last-of-type) {
    border-bottom: 1px solid fade(@syntax-cursor-color, 10%);
  }
}

.datatip-content {
  flex-grow: 1;

  // Allow higher-level component to override the cursor property on certain children.
  .list-tree {
    cursor: inherit;
  }
}

.datatip-pin-button {
  align-items: center;
  border-left: 1px solid fade(@syntax-cursor-color, 10%);
  cursor: pointer;
  display: flex;
  line-height: 2;
  padding-bottom: 0.1em;
  padding-left: 0.5em;
  padding-right: 0.3em;
  padding-top: 0.0em;
  &:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: @syntax-selection-flash-color;
  }
}

.datatip-marked-text-editor {
  .cursors {
    display: none;
  }
}

atom-text-editor {

  .datatip-highlight-region > .region {
    // Use a faded version of the cursor color so as to have a distinction when
    // overlapping with a selection (`@syntax-selection-color`). This element is
    // on top of the selection element, so that will show through.
    background: fade(@syntax-cursor-color, 10%);
  }

  .datatip-highlight-region-active > .region {
    // Animations such as `RotatingBackground` must be defined in a `*.atom-text-editor.less` file.
    animation: RotatingBackground 1s ease-in-out infinite reverse;
    background: linear-gradient(
      90deg,
      @syntax-selection-color,
      @syntax-background-color,
      @syntax-selection-color,
      @syntax-background-color
    );
    background-size: 300% 100%;
  }

}