@import "theme";

/* Styling for tooltip-style elements */

/* Tool tips (when hovering over an element */
.tooltip {
  display: inline-block;
  position: relative;

  .tooltiptext {
    visibility: hidden;
    width: 300px;
    background-color: var(--my-background-color);
    border: 2px solid var(--my-highlight-color);
    color: #fff;
    text-align: center;
    padding: 4px;
    left: 101%;

    pointer-events: none;
    position: absolute;
    z-index: 99;
  }

  /* Positioned to left of element rather than right */
  .tooltiptextleft {
    visibility: hidden;
    width: 300px;
    background-color: var(--my-background-color);
    border: 2px solid var(--my-highlight-color);
    color: #fff;
    text-align: center;
    padding: 4px;
    top: 50%;
    left: 50%;
    transform: translate(-100%, -100%);

    /* Backwards compatibility */
    -webkit-transform: translate(-100%, -100%);
    -moz-transform: translate(-100%, -100%);
    -o-transform: translate(-100%, -100%);
    -ms-transform: translate(-100%, -100%);

    position: absolute;
    z-index: 99;
  }

  /* Tooltip goes below cursor instead of above */
  .tooltiptextlow {
    visibility: hidden;
    width: 300px;
    background-color: var(--my-background-color);
    border: 2px solid var(--my-highlight-color);
    color: #fff;
    text-align: center;
    padding: 4px;
    left: 101%;

    pointer-events: none;
    position: absolute;
    z-index: 99;
    bottom: 25%;
  }
}

/* Same thing as a normal tooltip except its a bit higher */
.tooltip .tooltiptexthigh {
  visibility: hidden;
  width: 300px;
  background-color: var(--my-background-color);
  border: 2px solid var(--my-highlight-color);
  color: #fff;
  text-align: center;
  padding: 4px;
  left: 101%;
  bottom: -25%;

  position: absolute;
  z-index: 99;
}

.tooltip:hover .tooltiptext,
.tooltip:hover .tooltiptexthigh,
.tooltip:hover .tooltiptextleft,
.tooltip:hover .tooltiptextlow {
  visibility: visible;
}

.copy_tooltip {
  position: relative;
  display: inline-block;
}

.copy_tooltip_copied {
  color: #fff;
  transition: color 0.3s;
}

.copy_tooltip .copy_tooltip_text {
  visibility: hidden;
  font-size: 15px;
  padding: 5px;
  background-color: var(--my-background-color);
  color: #fff;
  text-align: center;
  position: absolute;
  z-index: 1;
  top: 120%;
  left: 5%;
  opacity: 0;
  border: 2px solid var(--my-highlight-color);
}

.copy_tooltip .copy_tooltip_text::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -6px;
  border-width: 8px;
  border-style: solid;
  border-color: transparent transparent white transparent;
}

.copy_tooltip .copy_tooltip_text_visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s;
}