@import "../../../theme/cores.scss";

.hint {
  width: 23px;
  height: 23px;
  position: relative;

  &-text {
    @apply bg-white;

    position: absolute;
    right: 0;
    border-radius: 5px;
    border: solid 2px $azul-4;
    font-size: 14px;
    font-weight: 600;
    width: max-content;
    max-width: 300px;
    padding: 20px;
    z-index: 1;
  }
}

svg {
  fill: $azul-4;

  &:hover {
    fill: $azul-3;
  }

  &.visible {
    fill: $amarelo-5;
  }
}