.dica {
	position: relative;

  &:hover {
    z-index: 49;
	}
}

.dica:not(:hover):not(:focus) {
  .dica__conteudo {
    @include esconder-acessivel;
  }
}

.dica__conteudo {
	@include calcular-entrelinhas(13px);
	@include fonte-regular;
	@include borda-arredondada-padrao;
	font-size: 13px;
	color: $cor-cinza-80;
	background-color: $cor-branca;
	padding: 8px 16px;
	position: absolute;
	z-index: 49;
	text-align: center;
	white-space: normal;
  box-shadow: 0 4px 16px rgba($cor-preta, 0.3), 0 -1px 0 rgba($cor-preta, 0.05);
}

// Modificadores de posição

$distancia-do-elemento: 14px;
// Como a seta tem 6px de tamanho, a distância é calculada
// dessa forma: 6px + 8px = 14px

.dica__conteudo_superior {
  @include seta("inferior-centro");
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: $distancia-do-elemento;
}

.dica__conteudo_inferior {
  @include seta("superior-centro");
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
	margin-top: $distancia-do-elemento;
}

.dica__conteudo_esquerda {
  @include seta("direita-centro");
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  margin-right: $distancia-do-elemento;
}

.dica__conteudo_direita {
  @include seta("esquerda-centro");
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  margin-left: $distancia-do-elemento;
}

// Modificadores de tamanho

.dica__conteudo_mini {
  width: 64px;
}

.dica__conteudo_pequeno {
  width: 128px;
}

.dica__conteudo_medio {
	width: 256px;
}

.dica__conteudo_grande {
  width: 512px;
}