/*
*   CSS styling for concepts visualization
*/

/* Light mode */
:root {
  --default-background-color: white;
  --default-text-color: black;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --default-background-color: hsl(225, 10%, 15%);
    --default-text-color: hsl(230, 10%, 85%);
  }
}

:root {
  /* Set the text color and background color depending on the current
  * vscode theme if available, or on the current light/dark mode if in 
  * a browser
  */
  --background-color: var(
    --vscode-editor-background,
    var(--default-background-color)
  );
  --text-color: var(--vscode-editor-foreground, var(--default-text-color));

  /* Reversed colors  */
  --reversed-background-color: var(--text-color);
  --reversed-text-color: var(--background-color);
}

.body-visualization {
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: sans-serif;
}

/* Style of the main element containing all the input sentences */
.line-style {
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
  /* line-height: 1.5em; */
  padding-left: 1em;
  margin-bottom: 0.2em;
}

/* Common style for all the words displayed (inputs, outputs, concepts) */
.common-word-style {
  font-family: inherit;
  font-size: 1.2em;
  padding: 0;
  margin-right: 0.2em;
  white-space: pre-wrap;
  border-radius: 0.5em;
  background-color: transparent;
  border: 0px solid transparent;
  outline: 1px solid transparent;
  color: var(--text-color);
  z-index: 0;
}
/*
* Styles of the highlighted words with attribution colors: the inputs and some of the outputs.
*/
.highlighted-word-style {
  position: relative; /* mandatory for the tooltip to be positioned correctly */
}
/* Highlighted words tooltips style */
.highlighted-word-style .tooltiptext {
  visibility: hidden;
  width: 3.5em;
  height: 1em;
  text-align: center;
  padding: 0.1em 0 0.7em 0;
  border-radius: 0.5em;
  /* reversed text colors (front & back) for the tooltips */
  color: var(--reversed-text-color);
  background-color: var(--reversed-background-color);
  /* Position of the tooltip w/r to the parent element */
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 125%;
  transform: translateX(-50%);
}
.highlighted-word-style .tooltiptext::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 100%;
  /* Triangle at the bottom of the tooltip */
  left: 50%;
  margin-left: -0.3em;
  border-width: 0.3em;
  border-style: solid;
  border-color: var(--reversed-background-color) transparent transparent
    transparent;
}
.highlighted-word-style:hover .tooltiptext {
  visibility: visible;
}

/*
* Style of the reactive/clickable elements.
*/
.reactive-word-style:hover {
  transform: scale(1.15);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

/*
* Style of the words (concepts & outputs) currently selected by the user.
*/
.selected-style {
  outline: 2px solid red !important;
}

/*
* Style of the concepts in the concept menu.
*/
.concept-style {
  margin-right: 0.75em;
  padding-left: 0.25em;
  padding-right: 0.25em;
  outline: 2px solid transparent;
}
