tooltip, modal {
  display: inline-block;
  >button {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.125rem;
    border: none;
    background: none;
    > svg {
      flex-shrink: 0;
      width: 1rem;
      aspect-ratio: 1;
      color: var(--black-300);
    }
    > span {
      display: block;
      color: var(--black-300);
      margin: 0;
    }
    &:hover {
      >span {
        color: var(--pricefox-primary-color);
      }
      >svg {
        color: var(--pricefox-primary-color);
      }
      +.hovered {
        display: block;
      }
    }
  }

  >tooltip-content {
    display: flex;
    width: 16.25rem;
    padding: 0.75rem;
    border-radius: 0.25rem;
    border: 1px var(--petrol-blue-100) solid;
    background: var(--gray-50);
    position: absolute;

    >p {
      margin: 0;
    }
  }
}

.hovered {
  display: none;
}