/* ============================================================
   DASHBOARD STORYS — DATA QUALITY TOOLTIP V3
============================================================ */

#quality-badge[data-quality-tooltip]{
  position:relative !important;
  overflow:visible !important;
}


/*
  Caixa do tooltip.
  É um pseudo-elemento, portanto não é destruído
  quando app.js altera badge.innerHTML.
*/

#quality-badge[data-quality-tooltip]::after{

  content:
    attr(data-quality-tooltip);

  position:absolute;

  top:calc(100% + 10px);
  right:0;

  z-index:99999;

  width:320px;
  max-width:min(
    320px,
    calc(100vw - 32px)
  );

  padding:14px 16px;

  border:
    1px solid
    rgba(255,255,255,.12);

  border-radius:14px;

  background:#101b2f;

  box-shadow:
    0 16px 45px
    rgba(0,0,0,.38);

  color:#e9f0f8;

  font-size:11px;
  font-weight:600;
  line-height:1.55;

  text-align:left;

  white-space:pre-line;

  opacity:0;
  visibility:hidden;

  pointer-events:none;

  transform:
    translateY(-5px);

  transition:
    opacity .16s ease,
    transform .16s ease,
    visibility .16s ease;
}


/*
  Pequeno triângulo.
*/

#quality-badge[data-quality-tooltip]::before{

  content:"";

  position:absolute;

  top:calc(100% + 4px);
  right:18px;

  z-index:100000;

  width:10px;
  height:10px;

  background:#101b2f;

  border-left:
    1px solid
    rgba(255,255,255,.12);

  border-top:
    1px solid
    rgba(255,255,255,.12);

  transform:
    rotate(45deg);

  opacity:0;
  visibility:hidden;

  pointer-events:none;

  transition:
    opacity .16s ease,
    visibility .16s ease;
}


#quality-badge[data-quality-tooltip]:hover::after,
#quality-badge[data-quality-tooltip]:focus::after,
#quality-badge[data-quality-tooltip]:focus-visible::after{

  opacity:1;
  visibility:visible;

  transform:
    translateY(0);
}


#quality-badge[data-quality-tooltip]:hover::before,
#quality-badge[data-quality-tooltip]:focus::before,
#quality-badge[data-quality-tooltip]:focus-visible::before{

  opacity:1;
  visibility:visible;
}


/*
  Permite teste por teclado/click.
*/

#quality-badge[data-quality-tooltip]{
  outline:none;
}


#quality-badge[data-quality-tooltip]:focus-visible{

  box-shadow:
    0 0 0 2px
    rgba(126,211,153,.26);
}


/* ============================================================
   MOBILE
============================================================ */

@media(max-width:700px){

  #quality-badge[data-quality-tooltip]::after{

    position:fixed;

    top:84px;
    left:16px;
    right:16px;

    width:auto;
    max-width:none;

    transform:
      translateY(-4px);

  }


  #quality-badge[data-quality-tooltip]::before{
    display:none;
  }


  #quality-badge[data-quality-tooltip]:hover::after,
  #quality-badge[data-quality-tooltip]:focus::after,
  #quality-badge[data-quality-tooltip]:focus-visible::after{

    transform:
      translateY(0);

  }

}