@import url('codemirror/addon/lint/lint.css');

/* Text styles */
.CodeMirror-lint-mark-error,
.CodeMirror-lint-mark-warning {
  background-repeat: repeat-x;
  /**
   * The following two are very specific to the font size, so we use 
   * "magic values" instead of variables.
   */
  background-size: 10px 3px;
  background-position: 0 95%;
}
.cm-s-graphiql .CodeMirror-lint-mark-error {
  color: hsl(var(--color-error));
}
.CodeMirror-lint-mark-error {
  background-image: linear-gradient(
      45deg,
      transparent 65%,
      hsl(var(--color-error)) 80%,
      transparent 90%
    ),
    linear-gradient(
      135deg,
      transparent 5%,
      hsl(var(--color-error)) 15%,
      transparent 25%
    ),
    linear-gradient(
      135deg,
      transparent 45%,
      hsl(var(--color-error)) 55%,
      transparent 65%
    ),
    linear-gradient(
      45deg,
      transparent 25%,
      hsl(var(--color-error)) 35%,
      transparent 50%
    );
}
.cm-s-graphiql .CodeMirror-lint-mark-warning {
  color: hsl(var(--color-warning));
}
.CodeMirror-lint-mark-warning {
  background-image: linear-gradient(
      45deg,
      transparent 65%,
      hsl(var(--color-warning)) 80%,
      transparent 90%
    ),
    linear-gradient(
      135deg,
      transparent 5%,
      hsl(var(--color-warning)) 15%,
      transparent 25%
    ),
    linear-gradient(
      135deg,
      transparent 45%,
      hsl(var(--color-warning)) 55%,
      transparent 65%
    ),
    linear-gradient(
      45deg,
      transparent 25%,
      hsl(var(--color-warning)) 35%,
      transparent 50%
    );
}

/* Popup styles */
.CodeMirror-lint-tooltip {
  background-color: hsl(var(--color-base));
  border: var(--popover-border);
  border-radius: var(--border-radius-8);
  box-shadow: var(--popover-box-shadow);
  font-size: var(--font-size-body);
  font-family: var(--font-family);
  max-width: 600px;
  overflow: hidden;
  padding: var(--px-12);
}
.CodeMirror-lint-message-error,
.CodeMirror-lint-message-warning {
  background-image: none;
  padding: 0;
}
.CodeMirror-lint-message-error {
  color: hsl(var(--color-error));
}
.CodeMirror-lint-message-warning {
  color: hsl(var(--color-warning));
}