.tooltip {
  cursor: pointer;
  position: relative;

  &-msg {
    position: absolute;
    bottom: 32px;
    color: #ffffff;
    background-color: #141314;
    padding: 12px 16px;
    font-size: 13px;
    text-align: center;
    letter-spacing: 0.5px;
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.20);
    display: none;
    min-width: 100px;
    width: max-content;
    max-width: 250px;

    &::before {
      content: "";
      position: absolute;
      bottom: -8px;
      width: 0;
      height: 0;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-top: 8px solid #141314;
    }
  }

  &:hover {
    .tooltip-msg {
      display: block;
    }
  }
}