/* inspired from https://medium.freecodecamp.org/a-step-by-step-guide-to-making-pure-css-tooltips-3d5a3e237346 */

/*
  css variables used:

  --ctip-background-color: the background color of the tooltip, and the tooltip's arrow
  --ctip-color: the text color of the tooltip
  --ctip-focus: box-shadow style for :focus of the tooltip
*/

/*
  makes the element the tooltip is attached to relatively positioned
  so that we can position the ::before && ::after elements around it
*/
[data-ctip] {
  position: relative;

  /*
    remove the browser default focus style as in Chrome the tooltip
    gets outlined as well as the base element

    new focus style added below so accessibility is still acceptable
  */
  box-shadow: none;
  outline: none;
}

/*
  remove the browser default focus states as in Firefox the tooltip
  gets outlined as well as the base element

  new focus style added below so accessibility is still acceptable
*/
[data-ctip]::-moz-focus-inner {
  border: 0;
}

/* this is to keep the underlying element of the ctips accessible */
[data-ctip]:focus {
  box-shadow: var(--ctip-focus, 0px 0px 0px 1px #4D90FE);
}

/* tooltip arrow */
[data-ctip]::before {
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 4px solid var(--ctip-background-color, #000000);
  content: '';
  left: 50%;
  opacity: 0;
  position: absolute;
  text-align: center;
  top: -7px;
  transform: translateX(-50%);
  transition: opacity 200ms linear;
  z-index: 5;
}

/* tooltip body */
[data-ctip]::after {
  background-color: var(--ctip-background-color, #000000);
  border-radius: 5px;
  color: var(--ctip-color, #ffffff);
  content: attr(data-ctip);
  font-size: 10px;
  left: 50%;
  opacity: 0;
  padding: 7px;
  position: absolute;
  text-align: center;
  top: -7px;
  transform: translateX(-50%) translateY(-100%);
  transition: opacity 200ms linear;
}

/* show on hover */
[data-ctip]:hover::after,
[data-ctip]:hover::before {
  opacity: var(--ctip-opacity, 0.8);
  transition: opacity 2000ms cubic-bezier(1.000, -0.405, 0.105, 0.400);
}

/*
  tooltip positioned to the top

  this is the default style, and is set on the base
  elements themselves, but listed here for ease of
  custom styling
*/
[data-ctip-position='top']::before {
  left: 50%;
  top: -7px;
  transform: translateX(-50%);
}

[data-ctip-position='top']::after {
  left: 50%;
  top: -7px;
  transform: translateX(-50%) translateY(-100%);
}

/* tooltip positioned to the bottom */
[data-ctip-position='bottom']::before {
  left: 50%;
  top: calc(100% + 4px);
  transform: translateX(-50%) rotate(180deg);
}

[data-ctip-position='bottom']::after {
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%) translateY(0%);
}

/* tooltip positioned to the left */
[data-ctip-position='left']::before {
  left: -13px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
}

[data-ctip-position='left']::after {
  left: -8px;
  top: 50%;
  transform: translateX(-100%) translateY(-50%);
}

/* tooltip positioned to the right */
[data-ctip-position='right']::before {
  left: 100%;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
}

[data-ctip-position='right']::after {
  left: calc(100% + 8px);
  top: 50%;
  transform: translateX(0%) translateY(-50%);
}